CSS---动态向下的循环箭头动画效果

news2024/10/3 8:31:19

介绍

在移动端的页面中，经常有翻页的提示效果，经常使用向下的箭头动画来提示；一般效果如下所示：
在这里插入图片描述

使用到的图片

使用到的图片，就是一个向下的箭头；这里可以下载我的图片使用；
或者也可以使用<>括号，然后通过旋转角度，使其向下；也可以；
请添加图片描述

代码

<!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>