时间:2021-05-08
有时侯页面很长,需要指示箭头告诉用户下面还有东西。可以用纯CSS的方法实现。
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图标制作上下跳动的指示箭头动画效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
如果使用PPT制作跳动的小球?利用ppt制作小球弹跳动画,教程中主要利用了直线路径,方法不难,只要几步就可以快速制作出弹跳动画效果,话不多说,接下来小编就给大家
下面通过图文并茂的方式给大家展示下css3制作变形与动画效果css3制作动画的几个属性:变形(transform),过渡(transition)和动画(anim
甩球是一种适合儿童和成人玩耍的玩具,多用橡胶为原材料。将双脚站在踏板上,配合双脚的运动,橡皮球会带动身体上下跳动,达到减肥健身的效果,可以训练孩子的协调能力和反
1.CSS拾遗之图标图标有三种制作方法:图片css(小箭头用CSS搞定)自己画font(fontawsome插件)fontawsome插件下载之后,解压,新版的
轮播图效果在网站所处可见,今天来做个简单的轮播图效果,有轮播指示点,有切换按钮箭头,效果如下图所示:css样式如图:html结构如图:js如图:html结构和c