为了让网页更加生动有趣,我们可以使用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动画。
-
css详解系列:10-Flex项目属性orderorder 属性 用来设置或检索弹性盒模型对象的项目(子元素)在容器中出现的順序。
-
css详解系列:11-Flex项目属性align-selfalign-self属性定义flex子项单独在侧轴(纵轴)方向上的对齐方式。
-
css实现点击切换图片效果的方法在css中我们可以使用伪类选择器来实现点击切换图片的效果,看看如何实现的。
-
css样式表的三种样式css(级联样式表)主要有三种样式定义方式
-
如何在css中实现样式优先级在css中,样式优先级是由一系列规则决定的,这些规则决定了当多个样式规则应用于同一个HTML元素时,哪个规则会优先生效。
-
css文本超出显示3个点的方法在css中,如果你想让超出特定长度的文本显示为三个点(...),你可以使用text-overflow属性,配合overflow和white-space属性。
暂无评论,抢个沙发...