html CSS 循环旋转的圆圈-CSDN博客
| 阿里云国内75折 回扣 微信号：monov8 |
| 阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
@keyframes move1{
0%{}
100%{transform: rotate(360deg);}
}
.box1{
width: 200px;
height: 200px;
margin: 20px;
background: red;
border-radius: 50%;
box-shadow: 0px 10px 10px 10px black;
position: relative;
left:50%;
top:50%;
transform-origin: left top;
transition-timing-function: ease;
animation-name: move1;
animation-duration: 1s;
animation-delay: 0s;
animation-direction:normal;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.box1:hover{
animation-play-state:paused ;
border-radius: 0%;
transition-duration: 2s;
transform: scale(1);
transition-timing-function: ease;
}
.box{
width: 100px;
height: 100px;
border: solid black 10px;
border-radius: 10%;
margin: 200px;
}
</style>
</head>
<body>
<div class=box>
<div class=box1></div>
</div>
</body>
</html>
