
.clock-icon { content: ''; width: 2em; height: 2em; border: .5em solid black; display: inline-block; border-radius: 2em; position: relative; } // hours .clock-icon:after { content: ''; position: absolute; top: .75em; left: 1em; width: 1em; height: .5em; background: black; display: inline-block; border-radius: 1em; transform-origin: 0 0.25em; animation: roll 12s infinite linear; z-index: 2; box-shadow: 0 0 .1em black; } // minutes .clock-icon:before { content: ''; position: absolute; top: .75em; left: 1em; width: .8em; height: .5em; background: black; display: inline-block; border-radius: 1em; transform-origin: 0 0.25em; animation: roll 1s infinite linear; z-index: 2; box-shadow: 0 0 .1em black; } @keyframes roll { 0% {transform: rotate(0);} 100% {transform: rotate(360deg);} }
Aucun commentaire:
Publier un commentaire