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

介绍

在移动端的页面中，经常有翻页的提示效果，经常使用向下的箭头动画来提示；一般效果如下所示：

使用到的图片

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

代码

<!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---动态向下的循环箭头动画效果相关推荐

html上下箭头动态效果,使用CSS和Bootstrap图标制作上下跳动的指示箭头动画效果...
有时侯页面很长,需要指示箭头告诉用户下面还有东西.可以用纯CSS的方法实现. HTML:添加一个链接,可修改锚点点击时滑动到指定位置,这里使用了Bootstrap 3.x版本的一个向下箭头作为图标. ...
css 让图标上下跳,使用CSS和Bootstrap图标制作上下跳动的指示箭头动画效果
有时侯页面很长,需要指示箭头告诉用户下面还有东西.可以用纯CSS的方法实现. HTML:添加一个链接,可修改锚点点击时滑动到指定位置,这里使用了Bootstrap 3.x版本的一个向下箭头作为图标. ...
html图片自动循环,css实现图片循环的动画效果（代码）
本篇文章给大家带来的内容是关于css实现图片循环的动画效果(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. *{margin: 0;padding: 0;} .robot{ w ...
css实现的立方体自动循环翻转动画html页面源码
大家好,今天给大家介绍一款,css实现的立方体自动循环翻转动画html页面源码 (图1).送给大家哦,获取方式在本文末尾. 图1 动画效果非常炫酷(图2) 图2 源码完整,需要的朋友可以下载学习(图3 ...
纯CSS实现帅气的SVG路径描边动画效果
一.应该人人皆会的基础技术简而言之,就是让SVG的描边像是有人绘制一样的动画效果. 国外很多相关介绍的文章,来看看一些效果gif吧~ 纯CSS实现帅气的SVG路径描边动画效果纯CSS实现帅气的SV ...
html怎么让方块自动旋转,如何使用纯CSS实现一个圆环旋转错觉的动画效果（附源码）...
本篇文章给大家带来的内容是关于如何使用纯CSS实现一个圆环旋转错觉的动画效果,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 效果预览源代码下载 https://github.com ...
html鼠标滑过导航条展开导航条,jquery css实现鼠标滑过导航菜单栏动画效果
对于导航栏的实现对于前端人员来说再简单不过了,但是如何让我们的导航看起来生动,给用户一种很高大上的感觉,却需要我们好好设计一下.今天我给大家带来的是我自己在项目中用到的一个例子,当我们鼠标滑过导航栏时 ...
css实现人走路效果,如何使用纯CSS实现一个人独自行走的动画效果（附源码）
本篇文章给大家带来的内容是关于如何使用纯CSS实现一个人独自行走的动画效果(附源码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 效果预览源代码下载 https://github ...
用css做一个移动射击动画,如何使用纯CSS实现一只移动的小白兔动画效果
本篇文章给大家带来的内容是关于如何使用纯CSS实现一只移动的小白兔动画效果,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 效果预览代码解读定义 dom,页面中包含 2 个元素,分 ...

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

介绍

使用到的图片

代码

CSS---动态向下的循环箭头动画效果相关推荐

最新文章

热门文章