1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > html上下箭头动态效果 使用CSS和Bootstrap图标制作上下跳动的指示箭头动画效果...

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

时间:2023-02-23 22:42:51

相关推荐

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。