本来想放一个抖动效果在热门搜索上,但一看代码太多了,一直抖也不顺眼,索性找了一个上下浮动(缓慢跳动)的css3效果。
循环不停跳动
/*上下跳动-不停止*/ @-webkit-keyframes bounce-down{25%{-webkit-transform:translateY(-10px)}50%,100%{-webkit-transform:translateY(0)}75%{-webkit-transform:translateY(10px)}} @keyframes bounce-down{25%{transform:translateY(-10px)}50%,100%{transform:translateY(0)}75%{transform:translateY(10px)}} .animate-bounce-down{-webkit-animation:bounce-down 1.5s linear infinite;animation:bounce-down 1.5s linear infinite} @-webkit-keyframes bounce-up{25%{-webkit-transform:translateY(10px)}50%,100%{-webkit-transform:translateY(0)}75%{-webkit-transform:translateY(-10px)}} @keyframes bounce-up{25%{transform:translateY(10px)}50%,100%{transform:translateY(0)}75%{transform:translateY(-10px)}} .animate-bounce-up{-webkit-animation:bounce-up 1.4s linear infinite;animation:bounce-up 1.4s linear infinite}
仅跳动一次
/*上下跳动-仅一次*/ .animation-ud{-webkit-animation:bounce 1s .2s ease both;-moz-animation:bounce 1s .2s ease both;} @-webkit-keyframes bounce{0%,20%,50%,80%,100%{-webkit-transform:translateY(0)}40%{-webkit-transform:translateY(-30px)}60%{-webkit-transform:translateY(-15px)}} @-moz-keyframes bounce{0%,20%,50%,80%,100%{-moz-transform:translateY(0)}40%{-moz-transform:translateY(-30px)}60%{-moz-transform:translateY(-15px)}}
把类名套进div标签就行了,貌似仅对div这种块状标签有效,所以最直接就用div了,最多加一个inline-block即可。
本站文章除注明转载/出处外,均为本站原创或翻译。若要转载但请务必注明出处,尊重他人劳动成果。
转载请注明出处链接 : https://www.inlojv.com/4397.html