css猫表情制作 |css3动画不循环

.cat-eyes {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 40px;
height: 40px;
border-radius: 50%;
background: #fff;
}
.cat-eyes::before,
.cat-eyes::after {
position: absolute;
content: '';
width: 18px;
height: 18px;
border-radius: 50%;
background: #058AAB;
}
.cat-eyes::before {
top: 32%;
left: 40%;
}
.cat-eyes::after {
top: 32%;
left: 60%;
}
.cat-mouth {
position: absolute;
top: 60%;
left: 50%;
transform: translate(-50%, -50%);
width: 45px;
height: 25px;
border-radius: 0 0 60px 60px;
background: #fff;
z-index: -1;
}
.cat-nose {
position: absolute;
top: 55%;
left: 50%;
transform: translate(-50%, -50%);
width: 12px;
height: 12px;
border-radius: 50%;
background: #000;
z-index: 1;
}
.cat-whisker {
position: absolute;
top: 49%;
left: 50%;
width: 75px;
height: 25px;
background: #ccc;
transform-origin: 0 50%;
z-index: 2;
overflow: hidden;
}
.cat-whisker::before,
.cat-whisker::after {
position: absolute;
content: '';
width: 75px;
height: 3px;
background: #000;
transform-origin: 0 50%;
transition: all 0.3s ease;
}
.cat-whisker::before {
transform: rotate(45deg);
top: 0;
}
.cat-whisker::after {
transform: rotate(-45deg);
bottom: 0;
}
.cat:hover .cat-eyes::before,
.cat:hover .cat-eyes::after {
width: 22px;
height: 22px;
}
.cat:hover .cat-nose {
top: 57%;
left: 48%;
}
.cat:hover .cat-whisker::before {
transform: rotate(30deg);
}
.cat:hover .cat-whisker::after {
transform: rotate(-30deg);
}

以上CSS代码中定义了猫眼、猫嘴、猫鼻、猫须等各个部分的样式，并在hover状态下对猫眼、猫鼻、猫须进行了一些变化，从而制作出了可爱的小猫动画效果。

通过学习这个简单有趣的CSS动画技术，大家可以更加熟练地应用CSS制作动画效果，不断提升自己的技能水平。