Card by escannord
#212121
1.card { 2 width: 200px; 3 height: 200px; 4 background: transparent; 5 border-radius: 50%; 6 border: 20px solid transparent; 7 position: relative; 8 overflow: hidden; 9 box-shadow: 2px 2px 2px black, inset 2px 2px 2px black, 10 -1px -1px 5px rgba(0, 0, 0, 0.473), inset -1px -1px 5px rgba(0, 0, 0, 0.473); 11} 12 13.numbers { 14 font-weight: bold; 15 position: absolute; 16 top: 50%; 17 left: 50%; 18 transform: translate(-50%, -50%); 19 width: 100%; 20 height: 100%; 21 border-radius: 50%; 22 padding: 20px; 23 background-color: transparent; 24} 25 26.number { 27 position: absolute; 28 top: 50%; 29 left: 50%; 30 transform: translate(-50%, -50%); 31 display: inline-block; 32 width: 0.1rem; 33 height: 0.9rem; 34 background-color: rgb(106, 108, 117); 35} 36.number:nth-child(1) { 37 transform: translate(-50%, -50%) rotateZ(calc(30deg)) translateY(-80px); 38} 39 40.number:nth-child(2) { 41 transform: translate(-50%, -50%) rotateZ(calc(60deg)) translateY(-80px); 42} 43 44.number:nth-child(3) { 45 transform: translate(-50%, -50%) rotateZ(calc(90deg)) translateY(-80px); 46} 47 48.number:nth-child(4) { 49 transform: translate(-50%, -50%) rotateZ(calc(120deg)) translateY(-80px); 50} 51 52.number:nth-child(5) { 53 transform: translate(-50%, -50%) rotateZ(calc(150deg)) translateY(-80px); 54} 55 56.number:nth-child(6) { 57 transform: translate(-50%, -50%) rotateZ(calc(180deg)) translateY(-80px); 58} 59 60.number:nth-child(7) { 61 transform: translate(-50%, -50%) rotateZ(calc(210deg)) translateY(-80px); 62} 63 64.number:nth-child(8) { 65 transform: translate(-50%, -50%) rotateZ(calc(240deg)) translateY(-80px); 66} 67 68.number:nth-child(9) { 69 transform: translate(-50%, -50%) rotateZ(calc(270deg)) translateY(-80px); 70} 71 72.number:nth-child(10) { 73 transform: translate(-50%, -50%) rotateZ(calc(300deg)) translateY(-80px); 74} 75 76.number:nth-child(11) { 77 transform: translate(-50%, -50%) rotateZ(calc(330deg)) translateY(-80px); 78} 79 80.number:nth-child(12) { 81 transform: translate(-50%, -50%) rotateZ(calc(0deg)) translateY(-80px); 82} 83 84.number:nth-child(3), 85.number:nth-child(6), 86.number:nth-child(9), 87.number:nth-child(12) { 88 width: 0.3rem; 89 height: 1.5rem; 90} 91 92.needles { 93 position: relative; 94 top: 50%; 95 left: 50%; 96 transform: translate(-50%, -50%); 97} 98 99.h, 100.m, 101.s, 102.center { 103 display: inline-block; 104 width: 7px; 105 height: 20px; 106 background-color: black; 107 position: absolute; 108 top: 50%; 109 left: 50%; 110 transform: translate(-50%, -50%); 111 border-radius: 50% 50% 0 0; 112} 113 114.s { 115 transform: translate(-50%, -80%); 116} 117 118.h { 119 background-color: black; 120 transform-origin: 50% 100%; 121 animation: rotate 43200s 60s infinite linear; 122 transform: translate(-50%, -100%) rotateZ(5deg); 123 height: 2.5rem; 124 z-index: 1; 125} 126 127.m { 128 background-color: rgb(176, 176, 185); 129 z-index: 2; 130 height: 4rem; 131 width: 5px; 132 transform-origin: 50% 100%; 133 transform: translate(-50%, -100%) rotateZ(60deg); 134 animation: rotate 3600s 60s infinite steps(60, end); 135} 136 137.s { 138 background-color: rgb(240, 31, 31); 139 z-index: 3; 140 height: 5rem; 141 width: 3px; 142 transform-origin: 50% 80%; 143 animation: rotate 60s infinite steps(60, end); 144} 145 146.center { 147 width: 15px; 148 height: 15px; 149 background-color: white; 150 border: solid 4px red; 151 z-index: 4; 152 border-radius: 50%; 153} 154 155@keyframes rotate { 156 100% { 157 transform: translate(-50%, -80%) rotateZ(360deg); 158 } 159} 160
547 views
Variation of acard
MIT License