介绍 & lt; a href=https://www.yisu.com/zixun/=肮龆?“#”类
<我class=" glyphicon glyphicon-chevron-down ">
/*向下滑动的动画效果*/@-webkit-keyframes drop {
0%的才能,,,{,上图:0 px;,,不透明度:,0;}
30%,才能,{,上图:10 px;,不透明度:,1;}
100%的才能,{,上图:25 px;,不透明度:,0;}
}
@keyframes drop {
0%的才能,,,{,上图:0 px;,,不透明度:,0;}
30%,才能,{,上图:10 px;,不透明度:,1;}
100%的才能,{,上图:25 px;,不透明度:,0;}
}/*应用动画,添加按钮效果*/.scroll-down {
边境:,,,,2 px solid # bbb;
,,,这个特性:,50%;
,,,保证金:,0,汽车;
,,,身高:,50 px;
,,,宽度:,50 px;
,,,显示:,块;
,,,text-align:,中心;
,,,z - index:, 10;
,,,-webkit-transition:, all 0.125 s ease-in-out 0;
,,,-moz-transition:, all 0.125 s ease-in-out 0;
,,,-ms-transition:, all 0.125 s ease-in-out 0;
,,,-o-transition:, all 0.125 s ease-in-out 0;
,,,的转变:,all 0.125 s ease-in-out 0;
}
.scroll-down span {
,,,位置:,相对;
,,,颜色:,# bbb;
,,,字体大小:,24 px;
,,,-webkit-animation-name:,下降;
,,,-webkit-animation-duration:, 1 s;
,,,-webkit-animation-timing-function:,线性;
,,,-webkit-animation-delay:, 0;
,,,-webkit-animation-iteration-count:,无限;
,,,-webkit-animation-play-state:,运行;
,,,animation-name:,下降;
,,,动画:,1 s;
,,,animation-timing-function:,线性;
,,,animation-delay:, 0;
,,,animation-iteration-count:,无限;
,,,animation-play-state:,运行;
}
小编给大家分享一下如何使用CSS和引导图标制作上下跳动的指示箭头动画效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!
HTML:添加一个链接,可修改锚点点击时滑动到指定位置,这里使用了引导3。x版本的一个向下箭头作为图标。
CSS:添加动画效果
以上是“如何使用CSS和引导图标制作上下跳动的指示箭头动画效果”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注行业资讯频道!
