如何使用css结合序列图(sprite),为你的网页丰富动效

fox/ 2023年07月13日/ CSS教程/ 浏览 2120

为了让网页更加生动有趣,我们可以使用CSS用序列图片做动画。很多复杂的动画,一般不要求我们用CSS3变形的方式画出来,而是采用一帧一帧连续播放静态的图片的方式形成动画。


具体实现方法是将一组图片合并成一张雪碧图(sprite),然后通过CSS的background-position属性来控制显示的图片位置来实现动画效果。


雪碧图(sprite)制作


我们可以通过3d软件,动画软件,图片设计软件来制作一组有动画效果的pgn图片,然后合成为一张图,所有图片改变效果放在一个图上,然后通过位移的动画效果做成看起来会动一样。


常用软件有:blender,C4d,ps,ai,Sketch,xd,figma等


当我们拥有一张雪碧图后,就可以进入css动画部分了


.sprite {
/* 雪碧图的背景图片路径 */
background-image: url(sprite.png);
/* 控制大小 */
width: 100px;
height: 100px;
/* 不显示雪碧图之外的部分 */
overflow: hidden;
}
/* 定义动画名称、时长、播放次数 */
@keyframes run {
0% {
background-position: 0 0;
}
100% {
background-position: -2500px 0; /* 2500为实际图片总宽度,共25张图合成为一张大图 */
}
}
.sprite.animate {
animation-name: run;
animation-duration: 1s;
animation-iteration-count: infinite; /* 无限循环 */
}


首先,通过sprite类定义一个div,将雪碧图作为背景图片。然后定义一个action动画,控制background-position值,使雪碧图在div中显示不同的图片。最后,通过animate类来应用action动画。

发表评论

暂无评论,抢个沙发...

客服 工单