纯css实现箭头无限循环滚动动画效果

 在前端页面开发中，尤其是在全屏滚动页面，banner幻灯片，h5页面中经常会需要这样的箭头︾动态效果，以引导用户往下滚动翻页或定位到下一屏内容。本文主要介绍通过css的方法来实现。...

在前端页面开发中，尤其是在全屏滚动页面，banner幻灯片，h5页面中经常会需要这样的箭头︾动态效果，以引导用户往下滚动翻页或定位到下一屏内容。本文主要介绍通过css的方法来实现。

效果如下：

纯css实现箭头无限循环滚动动画效果引导动效滚动页面纯css 动画箭头 css箭头动效图1

完整代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>纯css实现箭头无限循环滚动动画效果</title>
<style>
body{background: #004cff;
background: -webkit-linear-gradient(45deg, #004cff 0%, #04E7FF 100%);
background: -webkit-linear-gradient(45deg, #004cff 0%, #04E7FF 100%);
background: linear-gradient(45deg, #004cff 0%, #04E7FF 100%);}
.arrow{position:absolute;left:50%;top:50%;-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:translate3d(-50%,-50%,0);transform:translate3d(-50%,-50%,0)}
.arrow-1{-webkit-animation:arrow-movement 2s ease-in-out infinite;animation:arrow-movement 2s ease-in-out infinite}
.arrow-2{-webkit-animation:arrow-movement 2s 1s ease-in-out infinite;animation:arrow-movement 2s 1s ease-in-out infinite}
.arrow:before,.arrow:after{background:#fff;content:'';display:block;height:3px;position:absolute;top:0;left:0;width:30px;border-radius:10px}
.arrow:before{-webkit-transform:rotate(45deg) translateX(-21%);transform:rotate(45deg) translateX(-21%);-webkit-transform-origin:top left;transform-origin:top left}
.arrow:after{-webkit-transform:rotate(-45deg) translateX(21%);transform:rotate(-45deg) translateX(21%);-webkit-transform-origin:top right;transform-origin:top right}
@-webkit-keyframes arrow-movement{0%{opacity:0;top:45%}70%{opacity:1}100%{opacity:0}
}
@keyframes arrow-movement{0%{opacity:0;top:45%}70%{opacity:1}100%{opacity:0}}
</style>
</head>
 <body>
   <div class="arrow arrow-1"></div>
   <div class="arrow arrow-2"></div>
 </body>
</html>

点击查看