介绍

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

使用到的图片

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

代码

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

至此，就可以实现一个循环滚动的向下的箭头动画；

# css # css3 # 动画
Logo
腾讯云开发者社区

腾讯云面向开发者汇聚海量精品云计算使用和开发经验，营造开放的云计算技术生态圈。

更多推荐

Js分割字符串(单个分割符、多个分割符、正则)

1.单个分割符1.1定义和用法split() 方法用于把一个字符串分割成字符串数组。1.2语法stringObject.split(separator,howmany)参数描述separator必需。字符串或正则表达式，从该参数指定的地方分割 stringObject。howmany可选。该参数可指定返回的数组的最大长度。如果设置了该参数，返回的子串不会多于这个参数指定的数组。如果没有设置该参数，

avatar 腾讯云开发者社区

curl

什么是curl命令？curl是利用URL语法在命令行方式下工作的开源文件传输工具。它被广泛应用在Unix、多种Linux发行版中，并且有DOS和Win32、Win64下的移植版本。如何在windows下使用curl命令？第一步： 进入curl下载官网，下载合适的版本，我这里下载的是windows 64位的curl。其中我下载的zip文件。 另外CAB文件也是压缩文件，这...

avatar 腾讯云开发者社区

Zynq7000 USB2.0协议解析及USB控制器详解

USB 2.0规范及控制器文章目录USB 2.0规范及控制器USB2.0Univerasl Serial BusUSBHostUSB总线接口标准总线信号USB拓扑结构数据流模型数据编解码和位填充USB逻辑部件USB时间基准USB 描述符USB设备USB设备供电方式USB设备分层USB设备插入检测机制USB设备状态USB总线枚举USB传输传输类型包(Packet)事务(transaction)传输(

avatar 腾讯云开发者社区