小编给大家分享一下如何使用CSS和Bootstrap图标制作上下跳动的指示箭头动画效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
HTML:添加一个链接,可修改锚点点击时滑动到指定位置,这里使用了Bootstrap 3.x版本的一个向下箭头作为图标。
<a href="#" class="scroll-down"> <span> <i class="glyphicon glyphicon-chevron-down"></i> </span> </a>
CSS: 添加动画效果
/*向下滑动的动画效果*/ @-webkit-keyframes drop { 0% { top:0px; opacity: 0;} 30% { top:10px; opacity: 1;} 100% { top:25px; opacity: 0;} } @keyframes drop { 0% { top:0px; opacity: 0;} 30% { top:10px; opacity: 1;} 100% { top:25px; opacity: 0;} } /*应用动画,添加按钮效果*/ .scroll-down { border: 2px solid #bbb; border-radius: 50%; margin: 0 auto; height: 50px; width: 50px; display: block; text-align: center; z-index: 10; -webkit-transition: all 0.125s ease-in-out 0s; -moz-transition: all 0.125s ease-in-out 0s; -ms-transition: all 0.125s ease-in-out 0s; -o-transition: all 0.125s ease-in-out 0s; transition: all 0.125s ease-in-out 0s; } .scroll-down span { position: relative; color: #bbb; font-size: 24px; -webkit-animation-name: drop; -webkit-animation-duration: 1s; -webkit-animation-timing-function: linear; -webkit-animation-delay: 0s; -webkit-animation-iteration-count: infinite; -webkit-animation-play-state: running; animation-name: drop; animation-duration: 1s; animation-timing-function: linear; animation-delay: 0s; animation-iteration-count: infinite; animation-play-state: running; }
以上是“如何使用CSS和Bootstrap图标制作上下跳动的指示箭头动画效果”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。