介绍

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

使用到的图片

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

代码

<!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
腾讯云开发者社区

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

更多推荐

Springboot+MySQL 实现从数据库获取数据展示到前端

1.运行效果效果图如下：2.创建数据库表数据库名为"springboot",数据库表名为"user"，数据库表里面放了5条数据，字段分别为：“id”，“name”，“age”，“email”。3.新建SpringBoot项目1、选择Spring Initial...

avatar 腾讯云开发者社区
cover

腾讯云建官网：一个完整的自助建站的过程，不用代码，2小时就可以制作自己的网站

avatar 腾讯云开发者社区

数据库 实验二 数据库的简单查询和连接查询实验

– l）用Transact-SQL语句表示下列操作．在学生选课库中实现其数据查询操作．– ①求数学系学生的学号和姓名。select sno,sname from student where sdept='MA';– ②求选修了课程的学生学号。select distinct sno from sc;– ③求选修C1课程的学生学号和成绩，并要求对查询结果按成绩降序排列，如果成绩相同则按学号升序排列。s

avatar 腾讯云开发者社区