旋转的图片

Jsky
2020-03-05 09:14:04
前端
js jquery css

<html>
<head>
<meta charset="UTF-8">
<script src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.min.js"></script>
<style>
#xuanzhun{
 -webkit-transition-property: -webkit-transform;
    -webkit-transition-duration: 1s;
    -moz-transition-property: -moz-transform;
    -moz-transition-duration: 1s;
    -webkit-animation: rotate 3s linear infinite;
    -moz-animation: rotate 3s linear infinite;
    -o-animation: rotate 3s linear infinite;
    animation: rotate 3s linear infinite;
}
@-webkit-keyframes rotate{from{-webkit-transform: rotate(0deg)}
    to{-webkit-transform: rotate(360deg)}
}
@-moz-keyframes rotate{from{-moz-transform: rotate(0deg)}
    to{-moz-transform: rotate(359deg)}
}
@-o-keyframes rotate{from{-o-transform: rotate(0deg)}
    to{-o-transform: rotate(359deg)}
}
@keyframes rotate{from{transform: rotate(0deg)}
    to{transform: rotate(359deg)}
}
</style>
</head>
<body>
<img id="xuanzhun" src="https://upload.jianshu.io/users/upload_avatars/8509024/79001673-6125-4abd-918b-cc76a879af8c.png?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp" style="width: 150px; height: 150px; " />
</body>
</html>

Jsky博客