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

有时侯页面很长，需要指示箭头告诉用户下面还有东西。可以用纯CSS的方法实现。

HTML：添加一个链接，可修改锚点点击时滑动到指定位置，这里使用了Bootstrap 3.x版本的一个向下箭头作为图标。

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

css 让图标上下跳,使用CSS和Bootstrap图标制作上下跳动的指示箭头动画效果相关推荐

html上下箭头动态效果,使用CSS和Bootstrap图标制作上下跳动的指示箭头动画效果...
有时侯页面很长,需要指示箭头告诉用户下面还有东西.可以用纯CSS的方法实现. HTML:添加一个链接,可修改锚点点击时滑动到指定位置,这里使用了Bootstrap 3.x版本的一个向下箭头作为图标. ...
html怎么做向下的图标,用CSS和Bootstrap图标制作上下跳动的指示箭头动画效果
有时侯页面很长,需要指示箭头告诉用户下面还有东西.可以用纯CSS的方法实现. HTML:添加一个链接,可修改锚点点击时滑动到指定位置,这里使用了Bootstrap 3.x版本的一个向下箭头作为图标. ...
基于Bootstrap和animate.css的模态框动画效果
最近在网上看到了可以对Bootstrap模态框增加打开和关闭的动画效果,故记录一下.原文地址点这里此动画效果需要引入animate.css,可以在animate.css官方网址中点击下载animat ...
css海浪动画代码,CSS3实现的线条波浪动画效果
演示: http://demo.shanhubei.com/demo/waveAnimation/ 这是一款使用CSS3 animation动画和png图片制作的css3线条波浪动画效果.该特效中,使 ...
（转）基于Metronic的Bootstrap开发框架经验总结（4）--Bootstrap图标的提取和利用...
http://www.cnblogs.com/wuhuacong/p/4762924.html 在前面的一篇随笔<基于Metronic的Bootstrap开发框架经验总结(1)-框架总览及菜单模 ...
Bootstrap图标库的下载与使用
文章目录前言具体操作总结前言 Bootstrap 官方图标库拥有近 1500 个图标的免费.高质量的开源图标库.你可以以任何方式使用它们,例如 SVG 矢量图.SVG sprite或 web ...
Font Awesome一套绝佳的图标字体库和CSS框架的使用
场景 Font Awesome 一套绝佳的图标字体库和CSS框架官网: http://fontawesome.dashgame.com/ 实现从官网下载资源文件,解压后的目录将上面解压后的四个目 ...
[css] 移动页面底部工具条有3个图标，如何平分？在设置边框后最后一个图标掉下去了怎么办？
[css] 移动页面底部工具条有3个图标,如何平分?在设置边框后最后一个图标掉下去了怎么办? flex-wrap nowrap, 一般flex默认就是nowrap white-space:nowrap ...
html图标框架中文版,常见css框架有哪些？
CSS框架是预先准备好的软件框架,允许使用层叠样式表语言更容易,更符合标准的进行网页设计.大多数这些框架包含至少一个栅格设计(grid). 常见的css框架: 1.960gs 960 像素的页面宽度似 ...

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

css 让图标上下跳,使用CSS和Bootstrap图标制作上下跳动的指示箭头动画效果相关推荐

最新文章

热门文章