<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>旋转</title>
<style>
body
{
background-color:#000;
}
td
{
width:10px;
height:10px;
border-radius:10px;
background-color:#e85859;
position:fixed;
left:50%;
top:50%;
}
@keyframes td
{
0%{background-color:#e85859;}
20%{background-color:#e858e3;}
40%{background-color:#9c58e8;}
60%{background-color:#e8e658;}
80%{background-color:#58e862;}
90%{background-color:#58e3e8;}
100%{background-color:#e89558;}
}
td
{
animation: td 10s ease-in-out 1s infinite alternate;
}
.line1
{
width:70px;
height:70px;
border-radius:70px;
border:4px solid #e858e3;
margin:-34px -34px;
border-bottom-color: transparent;
border-top-color: transparent ;
}
.line2
{
width:90px;
height:90px;
border-radius:90px;
border:4px solid #9c58e8;
margin:-88px -44px;
border-bottom-color: transparent;
border-top-color: transparent;
}
.line3
{
width:110px;
height:110px;
border-radius:110px;
border:4px solid #e8e658;
margin: -108px -54px;
border-bottom-color: transparent;
border-top-color: transparent;
}
.line4
{
width:130px;
height:130px;
border-radius:130px;
border:4px solid #58e3e8;
margin: -128px -64px;
border-bottom-color: transparent;
border-top-color: transparent;
}
.line5
{
width:150px;
height:150px;
border-radius:150px;
border:4px solid #e89558;
margin: -148px -74px;
border-bottom-color: transparent;
border-top-color: transparent;
}
.line6
{
width:170px;
height:170px;
border-radius:170px;
border:4px solid #e85859;
margin: -168px -84px;
border-bottom-color: transparent;
border-top-color: transparent;
}
@keyframes line1
{
0%{transform:rotate(0deg);}
20%{transform:rotate(1340deg);}
40%{transform:rotate(1400deg);}
60%{transform:rotate(1460deg);}
80%{transform:rotate(1520deg);}
100%{transform:rotate(2300deg);}
}
td .line1
{
animation: line1 16s ease-in-out 0.1s infinite alternate;
}
@keyframes line2
{
0%{transform:rotate(0deg);}
20%{transform:rotate(1300deg);}
40%{transform:rotate(1360deg);}
60%{transform:rotate(1420deg);}
80%{transform:rotate(1480deg);}
100%{transform:rotate(2340deg);}
}
td .line2
{
animation: line2 16s ease-in-out 0.1s infinite alternate;
}
@keyframes line3
{
0%{transform:rotate(0deg);}
20%{transform:rotate(1200deg);}
40%{transform:rotate(1260deg);}
60%{transform:rotate(1320deg);}
80%{transform:rotate(1380deg);}
100%{transform:rotate(2400deg);}
}
td .line3
{
animation: line3 16s ease-in-out 0.1s infinite alternate;
}
@keyframes line4
{
0%{transform:rotate(0deg);}
20%{transform:rotate(1020deg);}
40%{transform:rotate(1380deg);}
60%{transform:rotate(1340deg);}
80%{transform:rotate(1200deg);}
100%{transform:rotate(2460deg);}
}
td .line4
{
animation: line4 16s ease-in-out 0.1s infinite alternate;
}
@keyframes line5
{
0%{transform:rotate(0deg);}
20%{transform:rotate(920deg);}
40%{transform:rotate(1380deg);}
60%{transform:rotate(1340deg);}
80%{transform:rotate(1100deg);}
100%{transform:rotate(2540deg);}
}
td .line5
{
animation: line5 16s ease-in-out 0.1s infinite alternate;
}
@keyframes line6
{
0%{transform:rotate(0deg);}
20%{transform:rotate(860deg);}
40%{transform:rotate(1320deg);}
60%{transform:rotate(1380deg);}
80%{transform:rotate(1040deg);}
100%{transform:rotate(2580deg);}
}
td .line6
{
animation: line6 16s ease-in-out 0.1s infinite alternate;
}
</style>
</head>
<body>
<table>
<tr>
<td>
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
<div class="line4"></div>
<div class="line5"></div>
<div class="line6"></div>
</td>
</tr>
</table>
</body>
</html>
