CSS3动漫图片是一种非常有趣的网页制作方式，它可以通过CSS3的动画特效，将一张静态图片变成一个生动活泼的动画效果，从而为网页增加更多的趣味性和吸引力。

.animated-image {
width: 300px;
height: 300px;
background: url('../images/animation.png') no-repeat center center;
background-size: cover;
position: relative;
overflow: hidden;
}
.animated-image:hover:before {
transform: translate(-50%, -50%) rotate(360deg);
opacity: 0;
}
.animated-image:before {
content: "";
width: 150%;
height: 150%;
position: absolute;
top: 50%;
left: 50%;
border: 2px solid #fff;
border-radius: 60%;
transform: translate(-50%, -50%) rotate(-45deg);
z-index: 2;
opacity: 1;
transition: all 0.6s ease;
}
.animated-image:after {
content: "";
width: 80%;
height: 80%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-45deg);
background: url('../images/animation2.png') no-repeat center center;
background-size: cover;
z-index: 1;
animation: Spin 4s infinite linear;
}
@keyframes Spin {
from {
transform: translate(-50%, -50%) rotate(-45deg);
}
to {
transform: translate(-50%, -50%) rotate(315deg);
}
}

上述CSS代码中，我们首先定义了一个类名为“animated-image”的元素，它是一个300x300像素的div容器，背景图片为一张名为“animation.png”的静态图片。

接下来，我们通过使用::before和::after伪元素，为这个div容器增加了许多特效。使用::before伪元素，创建了一个半径为60%、颜色为白色、宽高为150%的圆形mask，通过改变透明度和旋转动画，创造出了一个类似于遮罩消失的效果；使用::after伪元素，则是将另外一张名为“animation2.png”的图片居中叠加于圆形mask上，通过闪耀的旋转动画，实现了整个CSS3动漫图片的效果。

通过这段CSS代码的简单分析，我们可以看到，使用CSS3动画可以非常方便地将静态的图片变成生动活泼的单帧动画效果。如果您感兴趣，也可以尝试构建自己的CSS3动漫图片，为网页设计带来更多的创意和趣味性。