用HTML和CSS做一个不断跑动的可爱的仓鼠

<!DOCTYPE html>

<html>

<head>

<title>仓鼠宠物</title>

<style>

.wheel-and-hamster {

--dur: 1s;

position: relative;

width: 12em;

height: 12em;

font-size: 14px;

}

.wheel,

.hamster,

.hamster div,

.spoke {

position: absolute;

}

.wheel,

.spoke {

border-radius: 50%;

top: 0;

left: 0;

width: 100%;

height: 100%;

}

.wheel {

background: radial-gradient(100% 100% at center,hsla(0,0%,60%,0) 47.8%,hsl(0,0%,60%) 48%);

z-index: 2;

}

.hamster {

animation: hamster var(--dur) ease-in-out infinite;

top: 50%;

left: calc(50% - 3.5em);

width: 7em;

height: 3.75em;

transform: rotate(4deg) translate(-0.8em,1.85em);

transform-origin: 50% 0;

z-index: 1;

}

.hamster__head {

animation: hamsterHead var(--dur) ease-in-out infinite;

background: hsl(30,90%,55%);

border-radius: 70% 30% 0 100% / 40% 25% 25% 60%;

box-shadow: 0 -0.25em 0 hsl(30,90%,80%) inset,

0.75em -1.55em 0 hsl(30,90%,90%) inset;

top: 0;

left: -2em;

width: 2.75em;

height: 2.5em;

transform-origin: 100% 50%;

}

.hamster__ear {

animation: hamsterEar var(--dur) ease-in-out infinite;

background: hsl(0,90%,85%);

border-radius: 50%;

box-shadow: -0.25em 0 hsl(30,90%,55%) inset;

top: -0.25em;

right: -0.25em;

width: 0.75em;

height: 0.75em;

transform-origin: 50%