Created
February 27, 2023 12:51
-
-
Save lynas/dfee46061a7637fb7c86178376630f03 to your computer and use it in GitHub Desktop.
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
| <html> | |
| <head> | |
| <style> | |
| #container { | |
| background-color: #FFFFFF; | |
| } | |
| .arrow { | |
| position: absolute; | |
| top: 10%; | |
| left: 2%; | |
| transform: translate(-50%, -50%); | |
| transform: rotate(360deg); | |
| cursor: pointer; | |
| } | |
| .arrow span { | |
| display: block; | |
| width: .7vw; | |
| height: .7vw; | |
| border-bottom: 5px solid grey; | |
| border-right: 5px solid grey; | |
| transform: rotate(45deg); | |
| margin: -10px; | |
| animation: animate 2s infinite; | |
| } | |
| .arrow span:nth-child(2) { | |
| animation-delay: -0.2s; | |
| } | |
| .arrow span:nth-child(3) { | |
| animation-delay: -0.4s; | |
| } | |
| @keyframes animate { | |
| 0% { | |
| opacity: 0; | |
| transform: rotate(45deg) translate(-10px, -10px); | |
| } | |
| 50% { | |
| opacity: 1; | |
| } | |
| 100% { | |
| opacity: 0; | |
| transform: rotate(45deg) translate(4px, 4px); | |
| } | |
| } | |
| .circleBase { | |
| border-radius: 50%; | |
| behavior: url(PIE.htc); | |
| } | |
| .type1 { | |
| width: 40px; | |
| height: 40px; | |
| border: 4px solid grey; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="container"> | |
| <div class="circleBase type1"> | |
| <div class="arrow"> | |
| <span></span> | |
| <span></span> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment