!DOCTYPEhtml htmllang="en" head metacharset="UTF-8" metaname="viewport"content="width=device-width,initial-scale=1.0" metahttp-equiv="X-UA-Compatible"content="ie=edge" metacharset="utf-8" title旋转效果/title style div{ width:100%; margi
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta charset="utf-8"> <title>旋转效果</title> <style>
div { width:100%; margin:50px auto; text-align: center;
}
img { width: 200px; height: 200px; border-radius: 100px; animation: run 5s linear infinite; -webkit-animation: run 5s linear infinite; animation-play-state: running; -webkit-animation-play-state: running; }
img:hover { animation-play-state: paused; -webkit-animation-play-state: paused; }
@keyframes run { 0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); } }
@-webkit-keyframes run { 0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); } } </style> </head>
<body> <div> <img src="bg.png" /> </div> </body>
</html>