其他分享
首页 > 其他分享> > 用css写提示滚屏箭头动画效果

用css写提示滚屏箭头动画效果

作者:互联网

在许多滚屏的网页中都有提示滚屏箭头动画效果,这种效果往往在网页底部显示,提示我们下滑屏幕,现在我们就用css代码来实现这种效果。
本来这是一张动图。。
1、首先创建一个div,并且输入“>”(代码:>),再用css控制其大小、字体,并翻转90°让其向下(transform属性),控制位置为网页底部居中。
在这里插入图片描述
效果:
在这里插入图片描述
2、创建向下移动动画关键帧,取名arrow,用定位使箭头每次向下移动2px。
在这里插入图片描述
3、最后设置动画为无限循环,并且开始动画前延迟0.5s。在这里我使用的是animation复合属性。
语法如下:
在这里插入图片描述
本例用到代码:
在这里插入图片描述
201803090110-3

标签:动画,滚屏,网页,效果,箭头,css
来源: https://blog.csdn.net/weixin_54362381/article/details/112388306