css3animaleffect

CSS3animaleffect是利用CSS3技术实现的动画效果。它可以使网页中的动物图像变得栩栩如生，增强网页的趣味性和吸引力。

/*熊猫动画*/
.panda{
宽度：100px；
高度：100px；
位置：相对；
}
.panda体{
位置：绝对；
宽度：80px；
高度：60 像素；
左：10 像素；
背景：#fff；
边框半径：60px/30px；
box-sizing: 边框框；
}
.panda .ear {
位置：绝对；
宽度：30px；
高度：40px；
边框半径：60px/80px；
背景：#000；
}
.panda .ear.left {
左：-10px；
变换：旋转（-30deg）；
}
.panda .ear.right {
右：-10px；
变换：旋转（30度）；
}
.panda.眼{
位置：绝对；
宽度：20px；
高度：20px；
边界半径：50%；
背景：#000；
}
.panda .eye.left {
左：20 像素；
顶部：15 像素；
}
.panda .eye.right {
右：20 像素；
顶部：15 像素；
}
.panda.口{
位置：绝对；
宽度：30px；
高度：20px；
左：25 像素；
顶部：35 像素；
底部边框：10px 实心#000；
边框半径：0 0 60px 60px；
box-sizing: 边框框；
}
/*动画效果*/
@keyframes panda阿尼 {
0% {变换：旋转（0度）；
}
25% {
变换：旋转（10deg）；
}
50% {
变换：旋转（0度）；
}
75% {
变换：旋转（-10deg）；
}
100% {
变换：旋转（0度）；
}
}
.panda:悬停.ear.left{
变换：旋转（-50度）；
左：-20px；
}
.panda:悬停.ear.right{
变换：旋转（50度）；
右：-20px；
}
.panda:悬停.眼睛{
背景：#fff；
边框：2px 实心#000；
动画：眨眼5秒缓和无限；
}
.panda:悬停.口{
边框颜色：#fff；
背景：#fff；
动画：开启5s缓动无限；
}
@关键帧闪烁{
0%, 10% {
高度：20px；
}
15% {
高度：0；
}
20%, 100% {
高度：20px；
}
}
@关键帧打开{
0%, 10% {
高度：20px；
}
15%, 50% {
高度：40px；
}
55%, 100% {
高度：20px；
}
}

上面的CSS代码实现了可爱的熊猫动物效果。悬浮时会出现眨眼和张嘴动画效果，给用户带来良好的交互体验。