#212121
1.wheel-and-hamster { 2 --dur: 1s; 3 position: relative; 4 width: 12em; 5 height: 12em; 6 font-size: 14px; 7} 8 9.wheel, 10.hamster, 11.hamster div, 12.spoke { 13 position: absolute; 14} 15 16.wheel, 17.spoke { 18 border-radius: 50%; 19 top: 0; 20 left: 0; 21 width: 100%; 22 height: 100%; 23} 24 25.wheel { 26 background: radial-gradient(100% 100% at center,hsla(0,0%,60%,0) 47.8%,hsl(0,0%,60%) 48%); 27 z-index: 2; 28} 29 30.hamster { 31 animation: hamster var(--dur) ease-in-out infinite; 32 top: 50%; 33 left: calc(50% - 3.5em); 34 width: 7em; 35 height: 3.75em; 36 transform: rotate(4deg) translate(-0.8em,1.85em); 37 transform-origin: 50% 0; 38 z-index: 1; 39} 40 41.hamster__head { 42 animation: hamsterHead var(--dur) ease-in-out infinite; 43 background: hsl(30,90%,55%); 44 border-radius: 70% 30% 0 100% / 40% 25% 25% 60%; 45 box-shadow: 0 -0.25em 0 hsl(30,90%,80%) inset, 46 0.75em -1.55em 0 hsl(30,90%,90%) inset; 47 top: 0; 48 left: -2em; 49 width: 2.75em; 50 height: 2.5em; 51 transform-origin: 100% 50%; 52} 53 54.hamster__ear { 55 animation: hamsterEar var(--dur) ease-in-out infinite; 56 background: hsl(0,90%,85%); 57 border-radius: 50%; 58 box-shadow: -0.25em 0 hsl(30,90%,55%) inset; 59 top: -0.25em; 60 right: -0.25em; 61 width: 0.75em; 62 height: 0.75em; 63 transform-origin: 50% 75%; 64} 65 66.hamster__eye { 67 animation: hamsterEye var(--dur) linear infinite; 68 background-color: hsl(0,0%,0%); 69 border-radius: 50%; 70 top: 0.375em; 71 left: 1.25em; 72 width: 0.5em; 73 height: 0.5em; 74} 75 76.hamster__nose { 77 background: hsl(0,90%,75%); 78 border-radius: 35% 65% 85% 15% / 70% 50% 50% 30%; 79 top: 0.75em; 80 left: 0; 81 width: 0.2em; 82 height: 0.25em; 83} 84 85.hamster__body { 86 animation: hamsterBody var(--dur) ease-in-out infinite; 87 background: hsl(30,90%,90%); 88 border-radius: 50% 30% 50% 30% / 15% 60% 40% 40%; 89 box-shadow: 0.1em 0.75em 0 hsl(30,90%,55%) inset, 90 0.15em -0.5em 0 hsl(30,90%,80%) inset; 91 top: 0.25em; 92 left: 2em; 93 width: 4.5em; 94 height: 3em; 95 transform-origin: 17% 50%; 96 transform-style: preserve-3d; 97} 98 99.hamster__limb--fr, 100.hamster__limb--fl { 101 clip-path: polygon(0 0,100% 0,70% 80%,60% 100%,0% 100%,40% 80%); 102 top: 2em; 103 left: 0.5em; 104 width: 1em; 105 height: 1.5em; 106 transform-origin: 50% 0; 107} 108 109.hamster__limb--fr { 110 animation: hamsterFRLimb var(--dur) linear infinite; 111 background: linear-gradient(hsl(30,90%,80%) 80%,hsl(0,90%,75%) 80%); 112 transform: rotate(15deg) translateZ(-1px); 113} 114 115.hamster__limb--fl { 116 animation: hamsterFLLimb var(--dur) linear infinite; 117 background: linear-gradient(hsl(30,90%,90%) 80%,hsl(0,90%,85%) 80%); 118 transform: rotate(15deg); 119} 120 121.hamster__limb--br, 122.hamster__limb--bl { 123 border-radius: 0.75em 0.75em 0 0; 124 clip-path: polygon(0 0,100% 0,100% 30%,70% 90%,70% 100%,30% 100%,40% 90%,0% 30%); 125 top: 1em; 126 left: 2.8em; 127 width: 1.5em; 128 height: 2.5em; 129 transform-origin: 50% 30%; 130} 131 132.hamster__limb--br { 133 animation: hamsterBRLimb var(--dur) linear infinite; 134 background: linear-gradient(hsl(30,90%,80%) 90%,hsl(0,90%,75%) 90%); 135 transform: rotate(-25deg) translateZ(-1px); 136} 137 138.hamster__limb--bl { 139 animation: hamsterBLLimb var(--dur) linear infinite; 140 background: linear-gradient(hsl(30,90%,90%) 90%,hsl(0,90%,85%) 90%); 141 transform: rotate(-25deg); 142} 143 144.hamster__tail { 145 animation: hamsterTail var(--dur) linear infinite; 146 background: hsl(0,90%,85%); 147 border-radius: 0.25em 50% 50% 0.25em; 148 box-shadow: 0 -0.2em 0 hsl(0,90%,75%) inset; 149 top: 1.5em; 150 right: -0.5em; 151 width: 1em; 152 height: 0.5em; 153 transform: rotate(30deg) translateZ(-1px); 154 transform-origin: 0.25em 0.25em; 155} 156 157.spoke { 158 animation: spoke var(--dur) linear infinite; 159 background: radial-gradient(100% 100% at center,hsl(0,0%,60%) 4.8%,hsla(0,0%,60%,0) 5%), 160 linear-gradient(hsla(0,0%,55%,0) 46.9%,hsl(0,0%,65%) 47% 52.9%,hsla(0,0%,65%,0) 53%) 50% 50% / 99% 99% no-repeat; 161} 162 163/* Animations */ 164@keyframes hamster { 165 from, to { 166 transform: rotate(4deg) translate(-0.8em,1.85em); 167 } 168 169 50% { 170 transform: rotate(0) translate(-0.8em,1.85em); 171 } 172} 173 174@keyframes hamsterHead { 175 from, 25%, 50%, 75%, to { 176 transform: rotate(0); 177 } 178 179 12.5%, 37.5%, 62.5%, 87.5% { 180 transform: rotate(8deg); 181 } 182} 183 184@keyframes hamsterEye { 185 from, 90%, to { 186 transform: scaleY(1); 187 } 188 189 95% { 190 transform: scaleY(0); 191 } 192} 193 194@keyframes hamsterEar { 195 from, 25%, 50%, 75%, to { 196 transform: rotate(0); 197 } 198 199 12.5%, 37.5%, 62.5%, 87.5% { 200 transform: rotate(12deg); 201 } 202} 203 204@keyframes hamsterBody { 205 from, 25%, 50%, 75%, to { 206 transform: rotate(0); 207 } 208 209 12.5%, 37.5%, 62.5%, 87.5% { 210 transform: rotate(-2deg); 211 } 212} 213 214@keyframes hamsterFRLimb { 215 from, 25%, 50%, 75%, to { 216 transform: rotate(50deg) translateZ(-1px); 217 } 218 219 12.5%, 37.5%, 62.5%, 87.5% { 220 transform: rotate(-30deg) translateZ(-1px); 221 } 222} 223 224@keyframes hamsterFLLimb { 225 from, 25%, 50%, 75%, to { 226 transform: rotate(-30deg); 227 } 228 229 12.5%, 37.5%, 62.5%, 87.5% { 230 transform: rotate(50deg); 231 } 232} 233 234@keyframes hamsterBRLimb { 235 from, 25%, 50%, 75%, to { 236 transform: rotate(-60deg) translateZ(-1px); 237 } 238 239 12.5%, 37.5%, 62.5%, 87.5% { 240 transform: rotate(20deg) translateZ(-1px); 241 } 242} 243 244@keyframes hamsterBLLimb { 245 from, 25%, 50%, 75%, to { 246 transform: rotate(20deg); 247 } 248 249 12.5%, 37.5%, 62.5%, 87.5% { 250 transform: rotate(-60deg); 251 } 252} 253 254@keyframes hamsterTail { 255 from, 25%, 50%, 75%, to { 256 transform: rotate(30deg) translateZ(-1px); 257 } 258 259 12.5%, 37.5%, 62.5%, 87.5% { 260 transform: rotate(10deg) translateZ(-1px); 261 } 262} 263 264@keyframes spoke { 265 from { 266 transform: rotate(0); 267 } 268 269 to { 270 transform: rotate(-1turn); 271 } 272}
Comments
MIT License