运行效果：
然后从网上找 到写轮眼图片 切图
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/xielunyan.css" />
<title></title>
</head>
<body>
<h1> 自创 写轮眼 效果 </h1>
<div class="demo">
<div class="a">
<div class="x"><img src="img/xielunyan-01.png"/></div>
<div class="y"><img src="img/xielunyan-02.png"/></div>
<div class="z"><img src="img/xielunyan-03.png"/></div>
<div class="dot"></div>
</div>
</div>
</body>
</html>
CSS：
* {
padding: 0;
margin: 0;
}
.demo {
position: relative;
margin: 100px auto;
background: red;
width: 200px;
height: 200px;
border-radius: 50%;
}
.a {
position: absolute;
top: 50%;
left: 50%;
width: 140px;
height: 140px;
border: 1px solid #000;
margin: -70px 0 0 -70px;
border-radius: 50%;
animation: zhuan 2s ease infinite;
}
.x {
position: absolute;
width: 10px;
height: 10px;
background: #000;
/* background: url(../img/xielunyan-01.png);*/
left: 50%;
TOP: -5PX;
margin: 0 0 0 -5PX;
}
.x>img {
width: 20px;
height: 30px;
margin: -12px 0 0 0;
}
.y {
position: absolute;
width: 10px;
height: 10px;
background: #000000;
bottom: -5PX;
TOP: 66%;
}
.y>img {
width: 28px;
height: 23px;
margin: 0 0 0 -10px;
}
.z {
position: absolute;
width: 10px;
height: 10px;
background: #000000;
bottom: -5PX;
right: 0PX;
TOP: 66%;
}
.z>img {
width: 28px;
height: 23px;
margin: 0 0 0 -10px;
}
@keyframes zhuan {
from {
transform: rotateZ(-25deg);
opacity: 0;
}
to {
transform: rotateZ(335deg);
opacity: 1;
}
}
.dot {
width: 20px;
height: 20px;
border-radius: 50%;
background: #000000;
position: absolute;
left: 60px;
top: 60px
}
