首页 建站教程 WEB前端 正文

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

  点击查看

打赏
海报

声明:本站部分资源内容为站内原创著作,也有部分基于互联网公开分享整理,版权归原作者所有。
如侵犯到您的权益,请联系本站,我们会尽快处理,谢谢。转摘请注明出处

本文链接:https://www.umtheme.com/web/216.html

相关推荐

CSS心形缠绕转动效果

CSS心形缠绕转动效果

CSS心形缠绕转动效果是一种有趣的动画效果,能够给网页带来浪漫而动感的氛围。这个效果将一个心形图案无限旋转,并且同时绕着一个中心点缠绕旋...
WEB前端 2023.09.13 0 2349
制作h5常用的css3动画效果

制作h5常用的css3动画效果

css3提供了许多强大的特效,可以用来实现各种各样的效果,下面是我总结的一些常用的css3效果,有需要的可以直接引用:1.悬浮时放大:.one{transition:All 0.4s&nb...
WEB前端 2023.09.13 0 2203
发布评论

感谢您的支持