返回组件库
按钮
组件库
AI Design
仓鼠加载
CSS
01.wheel-and-hamster {02 --dur: 1s;03 position: relative;04 width: 12em;05 height: 12em;06 font-size: 14px;07}08 09.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}