CSS 3.0中的橡皮筋动画
给大家分享一个 橡皮筋动画，主要用在一些网站的返回项部图片上，当鼠标悬停时，会出现一个类似于橡皮筋抖动的动画，如抢福袋的动画，这个动画主要难度在于参数的控制上。
@keyframes rubberBand {from {transform: scale3d(1, 1, 1);}30 % {transform: scale3d(1.25, 0.75, 1);}40 % {transform: scale3d(0.75, 1.25, 1);}50 % {transform: scale3d(1.15, 0.85, 1);}65 % {transform: scale3d(.95, 1.05, 1);}75 % {transform: scale3d(1.05, .95, 1);}to {transform: scale3d(1, 1, 1);}
}
使用动画的时候，在要添加动画的元素上添加 animation: rubberBand 1s 即可。
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！