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動漫圖片，為網頁設計帶來更多的創意和趣味性。