标签或者图片循环旋转

最新推荐文章于 2020-12-13 13:01:19 发布

原创最新推荐文章于 2020-12-13 13:01:19 发布 · 468 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#标签或者图片循环旋转

本文介绍了一种使用CSS实现标签或图片无限循环旋转的方法，并确保了跨浏览器的兼容性。通过定义关键帧动画和使用不同前缀来覆盖各种浏览器，如Chrome、Firefox等。

让标签或者图片循环旋转(支持多种浏览器)

.div_style:HOVER{
-webkit-animation: z 5s linear 0s infinite;//谷歌
-moz-animation: z 5s linear 0s infinite;//
-ms-animation: z 5s linear 0s infinite;//
animation: z 5s linear 0s infinite;//
}

@-webkit-keyframes z {
from {
-webkit-transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
-moz-transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
-ms-transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
}
to {
-webkit-transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(360deg) scaleX(1) scaleY(1) scaleZ(1);
-moz-transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(360deg) scaleX(1) scaleY(1) scaleZ(1);
-ms-transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(360deg) scaleX(1) scaleY(1) scaleZ(1);
transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(360deg) scaleX(1) scaleY(1) scaleZ(1);
}