.clock-box { width:300px; height:300px; margin:100px auto; border:1px solid #00ff90; } .clock { width: 2px; height: 100px; background: #000000; margin: 30px auto; position: relative; } .clock::after { content: ""; position: absolute; bottom: -20px; left: -9px; width: 20px; height: 20px; border-radius: 10px; background: #ff0000; } .clock { -webkit-animation: go 1s ease-in-out alternate infinite; -moz-animation: go 1s ease-in-out alternate infinite; animation: go 1s ease-in-out alternate infinite; } @keyframes go { 0% { -webkit-transform: rotate(30deg); -webkit-transform-origin: top center; -moz-transform: rotate(30deg); -moz-transform-origin: top center; transform: rotate(30deg); transform-origin: top center; } 100% { -webkit-transform: rotate(-30deg); -webkit-transform-origin: top center; -moz-transform: rotate(-30deg); -moz-transform-origin: top center; transform: rotate(-30deg); transform-origin: top center; } } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter