直接点击查看效果即可。
虽然没有啥文字描述。但是先看效果，我晚上再把代码粘贴出来。
如果浏览器版本太老就算了啊。不玩IE6.
项目结构
Index代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="show"></div>
</body>
</html>CSS代码
*{
margin: 0px auto;
padding: 0px;
}
.show{
width: 500px;
height: 500px;
border:50px solid #02c2e5;
background-color: transparent;
border-radius: 50%;
position: relative;
top: 100px;
animation: round 1s infinite;
}
.show::before{
position: absolute;
top: 0px;
left: 0px;
content: "";
width: 100px;
height: 100px;
background-color: pink;
border-radius: 50%;
}
@keyframes round {
0%{rotate: 0deg;}
100%{rotate: 360deg;}
}大致这样，但是是动态的。
