使用CSS和Bootstrap图标制作上下跳动的指示箭头动画效果

源码坊

有时侯页面很长，需要指示箭头告诉用户下面还有东西。可以用纯CSS的方法实现。
HTML：添加一个链接，可修改锚点点击时滑动到指定位置，这里使用了Bootstrap 3.x版本的一个向下箭头作为图标。

1. <a href="#" class="scroll-down">   <span> <i class="glyphicon glyphicon-chevron-down"></i> </span> </a>

复制代码

CSS: 添加动画效果

1. /*向下滑动的动画效果*/ @-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图标制作上下跳动的指示箭头动画效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对模板人源码语网站的支持！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！模板人源码·版权声明


本网站所收集的部分公开资料来源于互联网，转载的目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。本站部分作品是由网友自主投稿和发布、编辑整理上传，对此类作品本站仅提供交流平台，不为其版权负责。如果您发现网站上有侵犯您的知识产权的作品，请与我们取得联系，我们会及时修改或删除。
      本网站所提供的信息，只供参考之用学习交流，切勿用作非法用途。本网站不保证信息的准确性、有效性、及时性和完整性。本网站及其雇员一概毋须以任何方式就任何信息传递或传送的失误、不准确或错误，对用户或任何其他人士负任何直接或间接责任。在法律允许的范围内，本网站在此声明，不承担用户或任何人士就使用或未能使用本网站所提供的信息或任何链接所引致的任何直接、间接、附带、从属、特殊、惩罚性或惩戒性的损害赔偿。        唯一网址: https://www.mubanren.com/thread-311-1-1.html