介绍
在移动端的页面中，经常有翻页的提示效果，经常使用向下的箭头动画来提示；一般效果如下所示：
使用到的图片
使用到的图片，就是一个向下的箭头；这里可以下载我的图片使用；
或者也可以使用<>括号，然后通过旋转角度，使其向下；也可以；
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.look-more {
position: fixed;
bottom: 15%;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.look-more img:first-child{
animation-delay: -1s; -webkit-animation-delay: -1s;
}
.look-more img:nth-child(2){
animation-delay: -0.5s; -webkit-animation-delay: -0.5s;
}
.look-more img:last-child{
animation-delay: 0s; -webkit-animation-delay: 0s;
}
.look-more img {
stroke: #fff; fill: transparent;
stroke-width: 2px;
animation: downMove 2s infinite;
-webkit-animation: downMove 2s infinite;
}
/* down */
@keyframes downMove{
0% {
opacity: 0; }
40% {
opacity: 1; }
80% {
opacity: 0; }
100% {
opacity: 0; }
}
.look-more img {
width: 12px;
display: inline-block;
}
</style>
<body>
<div class="look-more">
<img src="./xiangxia.png" alt="">
<img src="./xiangxia.png" alt="">
<img src="./xiangxia.png" alt="">
</div>
</body>
</html>
至此，就可以实现一个循环滚动的向下的箭头动画；