commit e3ee99ccbd8f9b8dd98289d3fed2bdd72291049b Author: MrEidam Date: Sun Nov 5 18:56:34 2023 +0100 Version 1 diff --git a/index.html b/index.html new file mode 100644 index 0000000..462e16e --- /dev/null +++ b/index.html @@ -0,0 +1,24 @@ + + + + + + + Effectos + + +
+ + + + + + + + + + +
+ + + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..02c82ee --- /dev/null +++ b/style.css @@ -0,0 +1,84 @@ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; +} +body{ + display: flex; + align-items: center; + justify-content: center; + min-height: 100vh; + overflow: hidden; + background: #000; +} +.loader{ + position: relative; + width: 300px; + height: 300px; + animation: rotate 20s linear infinite; +} +.loader span{ + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + transform: rotate(calc(36deg * var(--i))); +} +.loader span::before{ + content: ''; + position: absolute; + top: 0; + left: 0; + width: 25px; + height: 25px; + border-radius: 50%; + background: transparent; + border: 4px solid #00efff; + box-sizing: border-box; + box-shadow: + 0 0 20px #00efff, + -30px -30px 0 #00efff, + -30px -30px 20px #00efff, + 30px 30px 0 #00efff, + 30px 30px 20px #00efff, + 30px -30px 0 #00efff, + 30px -30px 20px #00efff, + -30px 30px 0 #00efff, + -30px 30px 20px #00efff; + animation: animate 5s linear infinite; + animation-delay: calc(-0.25s * var(--i)); + transform-origin: 20px; + transition: 2s; +} +.loader:hover span::before{ + box-shadow: + 0 0 20px #00efff, + -200px -200px 0 #00efff, + -200px -200px 20px #00efff, + 200px 200px 0 #00efff, + 200px 200px 20px #00efff, + 200px -200px 0 #00efff, + 200px -200px 20px #00efff, + -200px 200px 0 #00efff, + -200px 200px 20px #00efff; + transform-origin: 250px; +} +@keyframes animate{ + from{ + transform: rotate(0deg); + filter: hue-rotate(0deg); + } + to{ + transform: rotate(360deg); + filter: hue-rotate(360deg); + } +} +@keyframes rotate{ + from{ + transform: rotate(0deg); + } + to{ + transform: rotate(360deg); + } +} \ No newline at end of file