[CSS3]div上下浮动

本来想放一个抖动效果在热门搜索上,但一看代码太多了,一直抖也不顺眼,索性找了一个上下浮动(缓慢跳动)的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即可。

赞(0)
本站资源内容仅供个人学习交流使用,在使用前请务必核对是否正确和完整,请您在下载后24小时内删除,请勿用于商业用途,免责声明:https://www.fankuiba.com/privacy-policies-and-terms