(作者:饶家俊,撰写时间: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只接添加像素。
不单只是左右移动,还可以改变图片的大小,添加阴影等等。
如果是文字还可以改变颜色,字体大小等等。