100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > css关键帧 keyframes动画使用方法

css关键帧 keyframes动画使用方法

时间:2020-06-09 07:22:44

相关推荐

css关键帧 keyframes动画使用方法

(作者:饶家俊,撰写时间:1月16号)

先在HTmL设置了div,div里面可以放一张图片或者文字等等。我在里面放了一张图片。

在下面去设置一些样式,cursor: pointer;是鼠标移进去变成一只手。

在截图中我们看到给图片设置了一些东西。

Beating是调用动画的名称。

5s 是整个动画几秒钟完成 。

ease 是动画播放方式。

infinite是无限次播放也可以设置数字。

下面的截图中@keyframes

后面在给它取个名字来调用它。

在下面就是设置你想要的效果。

0%和100%是开始到结尾,里面你可以自由添加22% 44% 66% 99%等等。

0%里面有一穿代码transform: translate(0,0); 第一个零可以设置向x轴左右移动。

第2个零可以向y轴上下移动。

Beating是设置动画的名称也可以自己取名。

也可以在translate后面来加x或者y只接添加像素。

不单只是左右移动,还可以改变图片的大小,添加阴影等等。

如果是文字还可以改变颜色,字体大小等等。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。