首页 建站教程 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实现菜单或列表循环向上滚动效果

在前端开发过程中,有时候针对某个模块需要无限循环的滚动一些消息或菜单,我们常用的方法基本上都是通过js来实现,虽然代码相对来说可能会精简一些,但是对于JS不是很熟悉的同学来说还是不太好理解,毕竟相对于...
WEB前端 2022.08.17 0 185
纯CSS3实现3D切换选项卡

纯CSS3实现3D切换选项卡

Tab选项卡是大家最常用的功能之一,因为兼容性的问题目前大多朋友也都是用js书写,当然我也会用JS去书写,必定web端的应用你的用户群体...
WEB前端 2022.08.16 0 298
发布评论

ainiaobaibaibaibaobaobeishangbishibizuichiguachijingchongjingdahaqiandaliandangaodw_dogedw_erhadw_miaodw_tuzidw_xiongmaodw_zhutouganbeigeiliguiguolaiguzhanghahahahashoushihaixiuhanheixianhenghorse2huaixiaohuatonghuaxinhufenjiayoujiyankeaikeliankouzhaokukuloukunkuxiaolandelinileimuliwulxhainiolxhlikelxhqiuguanzhulxhtouxiaolxhwahahalxhzanningwennonuokpinganqianqiaoqinqinquantouruoshayanshengbingshiwangshuaishuijiaosikaostar0star2star3taikaixintanshoutianpingtouxiaotuwabiweifengweiquweiwuweixiaowenhaowoshouwuxiangjixianhuaxiaoerbuyuxiaokuxiaoxinxinxinxinsuixixixuyeyinxianyinyueyouhenghengyuebingyueliangyunzanzhajizhongguozanzhoumazhuakuangzuohenghengzuoyi
感谢您的支持