Created
July 7, 2024 14:38
-
-
Save argf013/9261b66d1d2f645f93ae4ff216c2e840 to your computer and use it in GitHub Desktop.
HTML Rotating Gradient Circle
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <style> | |
| body { | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| height: 100vh; | |
| background: #f0f0f0; | |
| margin: 0; | |
| } | |
| .root-container { | |
| position: absolute; | |
| width: 100%; | |
| } | |
| .container { | |
| position: relative; | |
| width: 200px; | |
| height: 200px; | |
| } | |
| .circle-gradient { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(to bottom, #007AFF, #2D3E50); | |
| border-radius: 50%; | |
| z-index: 3; | |
| } | |
| .circle-gradient-shadow { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| border-radius: 50%; | |
| z-index: 3; | |
| box-shadow: inset 4px 6px 4px rgba(0, 0, 0, 0.5); | |
| } | |
| .circle-white { | |
| position: absolute; | |
| top: 50px; | |
| left: 50px; | |
| width: 100px; | |
| height: 100px; | |
| background: #f0f0f0; | |
| border-radius: 50%; | |
| z-index: 4; | |
| } | |
| .circle-shadow { | |
| position: absolute; | |
| top: 50px; | |
| left: 50px; | |
| width: 100px; | |
| height: 100px; | |
| border-radius: 50%; | |
| box-shadow: 0 8px 4px 0 rgba(0, 0, 0, 0.5); | |
| z-index: 3; | |
| } | |
| .circle-gradient.rotate { | |
| animation: rotate 2s linear infinite; | |
| } | |
| .line { | |
| position: absolute; | |
| width: 100%; | |
| height: 2px; | |
| background: black; | |
| } | |
| @keyframes rotate { | |
| from { | |
| transform: rotate(0deg); | |
| } | |
| to { | |
| transform: rotate(360deg); | |
| } | |
| } | |
| </style> | |
| <title>Rotating Gradient Circle</title> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="circle-gradient"></div> | |
| <div class="circle-gradient-shadow"></div> | |
| <div class="circle-white"></div> | |
| <div class="circle-shadow"></div> | |
| </div> | |
| <div class="line"></div> | |
| <script> | |
| const circleWhite = document.querySelector('.circle-white'); | |
| const circleGradient = document.querySelector('.circle-gradient'); | |
| const circleGradientShadow = document.querySelector('.circle-gradient-shadow'); | |
| circleWhite.addEventListener('mouseover', function () { | |
| circleGradient.classList.add('rotate'); | |
| }); | |
| circleWhite.addEventListener('mouseout', function () { | |
| circleGradient.classList.remove('rotate'); | |
| }); | |
| circleGradientShadow.addEventListener('mouseover', function () { | |
| circleGradient.classList.add('rotate'); | |
| }); | |
| circleGradientShadow.addEventListener('mouseout', function () { | |
| circleGradient.classList.remove('rotate'); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment