CSS3动物效果是一种使用CSS3技术实现的动画效果，它可以让网页中的动物形象栩栩如生，增强了网页的趣味性和吸引力。

/*熊猫动画*/
.panda {
width: 100px;
height: 100px;
position: relative;
}
.panda body {
position: absolute;
width: 80px;
height: 60px;
left: 10px;
background: #fff;
border-radius: 60px/30px;
box-sizing: border-box;
}
.panda .ear {
position: absolute;
width: 30px;
height: 40px;
border-radius: 60px/80px;
background: #000;
}
.panda .ear.left {
left: -10px;
transform: rotate(-30deg);
}
.panda .ear.right {
right: -10px;
transform: rotate(30deg);
}
.panda .eye {
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
background: #000;
}
.panda .eye.left {
left: 20px;
top: 15px;
}
.panda .eye.right {
right: 20px;
top: 15px;
}
.panda .mouth {
position: absolute;
width: 30px;
height: 20px;
left: 25px;
top: 35px;
border-bottom: 10px solid #000;
border-radius: 0 0 60px 60px;
box-sizing: border-box;
}
/*动画效果*/
@keyframes panda-ani {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(10deg);
}
50% {
transform: rotate(0deg);
}
75% {
transform: rotate(-10deg);
}
100% {
transform: rotate(0deg);
}
}
.panda:hover .ear.left{
transform: rotate(-50deg);
left: -20px;
}
.panda:hover .ear.right{
transform: rotate(50deg);
right: -20px;
}
.panda:hover .eye{
background: #fff;
border: 2px solid #000;
animation: blink 5s ease infinite;
}
.panda:hover .mouth{
border-color: #fff;
background: #fff;
animation: open 5s ease infinite;
}
@keyframes blink {
0%, 10% {
height: 20px;
}
15% {
height: 0;
}
20%, 100% {
height: 20px;
}
}
@keyframes open {
0%, 10% {
height: 20px;
}
15%, 50% {
height: 40px;
}
55%, 100% {
height: 20px;
}
}

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