利用渐变绘制一个轮回眼，个人认为还原度很高
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>轮回眼</title>
<meta name="author" content="saoge" />
<style type="text/css">
.box{
position: relative;
width: 800px;
height: 800px;
border: 1px solid #000000;
margin: 50px auto 0;
}
.orbit{
position: absolute;
overflow: hidden;
width: 400px;
height: 220px;
float: left;
border: 10px solid #000000;
transform: skew(-30deg);
top: 280px;
left: 200px;
border-radius:190px 10px 170px 10px ;
box-shadow: 0px 0px 20px #000000,0px 10px 20px #000000 inset;
}
.eye{
position: absolute;
transform: skew(30deg);
float: left;
top: -60px;
left: -90px;
width: 600px;
height: 300px;
background:repeating-radial-gradient(40px at center center,#a69cb8,#a69cb8,#a69cb8,#a69cb8,#a69cb8,#000000);
animation: sca .5s infinite;
}
.eye::after{
content: "";
display: block;
width: 25px;
height: 25px;
background-color: #000000;
position: absolute;
border-radius: 50%;
left: 288px;
top: 136px;
}
.orbitC{
position: absolute;
overflow: hidden;
width: 400px;
height: 220px;
float: left;
border: 8px solid #000000;
transform: skew(-30deg);
top: 280px;
left: 200px;
border-radius:190px 10px 170px 10px ;
box-shadow: 0px 0px 50px #000000,15px 30px 30px 5px #000000 inset;
}
@keyframes sca{
0%{
background:repeating-radial-gradient(40px at center center,#a69cb8,#a69cb8,#a69cb8,#a69cb8,#a69cb8,#000000);
}
25%{
background:repeating-radial-gradient(45px at center center,#a69cb8,#a69cb8,#a69cb8,#a69cb8,#a69cb8,#000000);
}
50%{
background:repeating-radial-gradient(50px at center center,#a69cb8,#a69cb8,#a69cb8,#a69cb8,#a69cb8,#000000);
}
75%{
background:repeating-radial-gradient(45px at center center,#a69cb8,#a69cb8,#a69cb8,#a69cb8,#a69cb8,#000000);
}
100%{
background:repeating-radial-gradient(40px at center center,#a69cb8,#a69cb8,#a69cb8,#a69cb8,#a69cb8,#000000);
}
}
</style>
</head>
<body>
<div class="box">
<div class="orbit">
<div class="eye"></div>
</div>
<div class="orbitC"></div>
</div>
</body>
</html>