Created
June 23, 2015 13:59
-
-
Save diablowu/18230b015c04adc268de to your computer and use it in GitHub Desktop.
clock css3
This file contains hidden or 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
| /* clock animation */ | |
| /* WebKit */ | |
| span.sec { | |
| -webkit-animation: rotateBB 60s infinite linear; | |
| } | |
| span.min { | |
| -webkit-animation: rotateBB 3600s infinite linear; | |
| } | |
| @keyframes rotateBB { | |
| 0% { | |
| -webkit-transform:rotate(0deg); | |
| transform:rotate(0deg) | |
| } | |
| 100% { | |
| -webkit-transform:rotate(360deg); | |
| transform:rotate(360deg) | |
| } | |
| } | |
| /* just some basic styling */ | |
| time { | |
| position: relative; | |
| display: inline-block; | |
| width: 200px; | |
| height: 200px; | |
| border-radius: 100px; | |
| background-color: #eee; | |
| } | |
| span { | |
| position: absolute; | |
| left: 100px; | |
| height: 100px; | |
| -webkit-transform-origin: bottom center; | |
| -moz-transform-origin: bottom center; | |
| } | |
| span.sec ,span.min { | |
| box-shadow: red 0 0 0 1px; | |
| height: 90px; | |
| top: 10px; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment