#e8e8e8
1.face { 2 position: relative; 3 width: 180px; 4 height: 180px; 5 border-radius: 50%; 6 outline: 10px solid #333; 7 background: repeating-radial-gradient(circle at 50% 50%, 8 rgba(200,200,200,.2) 0%, rgba(200,200,200,.2) 2%, 9 transparent 2%, transparent 3%, rgba(200,200,200,.2) 3%, 10 transparent 3%), conic-gradient(white 0%, silver 10%, 11 white 35%, silver 45%, white 60%, silver 70%, 12 white 80%, silver 95%, white 100%); 13 box-shadow: inset 0 0 20px #0007; 14} 15 16.hour { 17 position: absolute; 18 width: 5px; 19 height: 60px; 20 background: #aaa; 21 left: 87.5px; 22 top: 43px; 23 border-radius: 3px 3px 1px 1px; 24 transform-origin: 2px 47px; 25 box-shadow: 0 0 5px #0005,inset 1.5px 3px 0px #333, inset -1.5px -3px 0px #333; 26 z-index: 1; 27 animation: watch 43200s linear infinite; 28} 29 30.minute { 31 position: absolute; 32 width: 4px; 33 height: 78px; 34 background: #aaa; 35 left: 88px; 36 top: 25px; 37 border-radius: 3px 3px 1px 1px; 38 transform-origin: 2px 65px; 39 box-shadow: 0 0 5px #0005, inset 1.5px 3px 0px #333, inset -1.5px -3px 0px #333; 40 z-index: 2; 41 animation: watch 3600s linear infinite; 42} 43 44.second { 45 position: absolute; 46 width: 10px; 47 height: 10px; 48 background: red; 49 left: 85px; 50 top: 85px; 51 border-radius: 50%; 52 border: 1px solid #eee; 53 z-index: 3; 54 animation: watch 60s steps(60, end) 0s infinite; 55} 56 57.second::before { 58 content: ""; 59 position: absolute; 60 width: 1px; 61 height: 85px; 62 left: 3px; 63 bottom: -10px; 64 background: red; 65 border-radius: 2px; 66 box-shadow: 5px 0 2px rgba(128, 128, 128, 0.2); 67} 68 69.second::after { 70 content: ""; 71 position: absolute; 72 width: 4px; 73 height: 4px; 74 left: 2px; 75 top: 2px; 76 background: #555; 77 border-radius: 50%; 78} 79 80.v-index { 81 position: absolute; 82 color: #333; 83 font-size: 24px; 84 left: 83.5px; 85 top: -3px; 86 text-shadow: 0 157px 0 #333; 87 z-index: 1 88} 89 90.h-index { 91 position: absolute; 92 color: #333; 93 font-size: 24px; 94 top: 72px; 95 left: 5px; 96 transform: rotate(-90deg); 97 text-shadow: 0 158px 0 #333; 98 z-index: 1; 99} 100 101@keyframes watch { 102 0% { 103 transform: rotate(0deg); 104 } 105 106 100% { 107 transform: rotate(360deg); 108 } 109} 110
12K views
12K views
Comments
Variations
1 MIT License