<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/style.css" rel="stylesheet">
<style>
*{
margin: 0;
padding: 0;
list-style: none;
outline: none;
}
html,body{
width: 100%;
height: 100%;
}
body{
background: radial-gradient(ellipse at center, #34679a 0%, #214163 50%, #0d1926 100%);
}
body>div{
/* 上下并排，水平居中
display: inline-block;
text-align: center; */
width: 200px;
height: 200px;
border: 1px solid #fff;
border-radius: 50%;
position: absolute;
top: 15%;
left: 50%;
margin-left: -50px;
transform: rotateX(80deg) rotateY(20deg);
transform-style: preserve-3d;
}
body > div:nth-of-type(2){
transform: rotateX(-80deg) rotateY(20deg);
}
body > div:nth-of-type(3){
transform: rotateX(-70deg) rotateY(60deg);
}
body > div:nth-of-type(4){
transform: rotateX(70deg) rotateY(60deg);
}
body > div:first-of-type::after{
content: "";
/* display: inline-block; */
width: 40px;
height: 40px;
background: #fff;
position: absolute;
top: 50%;
left: 50%;
margin-top: -20px;
margin-left: -20px;
transform: rotateX(80deg);
border-radius: 50%;
animation: nuclues 2s linear infinite;
}
@keyframes nuclues{
0%{
box-shadow: 0 0 0 transparent;
}
50%{
box-shadow: 0 0 0 transparent;
}
100%{
box-shadow: 0 0 0 transparent;
}
}
body > div > div{
width: 200px;
height: 200px;
/* border-radius: 50%; */
transform-style: preserve-3d;
animation: trail 1s infinite linear;
}
@keyframes trail{
from{
transform: rotateZ(0deg);
}
to{
transform: rotateZ(360deg);
}
}
body > div > div::after{
content: "";
width: 5px;
height: 5px;
position: absolute;
background: #fff;
border-radius: 50%;
position: absolute;
top: -5px;
left: 50%;
margin-left: -5px;
box-shadow: 0 0 12px #fff;
animation: particle 1s infinite linear;
}
@keyframes particle{
from{
transform: rotateX(0deg) rotateY(0deg);
}
to{
transform: rotateX(90deg) rotateY(-360deg);
}
}
body>div:nth-of-type(2)>div,
body>div:nth-of-type(2)>div::after{
animation-delay: -0.5s;
}
body>div:nth-of-type(3)>div,
body>div:nth-of-type(3)>div::after{
animation-delay: -1s;
}
body>div:nth-of-type(4)>div,
body>div:nth-of-type(4)>div::after{
animation-delay: -1.5s;
}
</style>
</head>
<body>
<div>
<div></div>
</div>
<div>
<div></div>
</div>
<div>
<div></div>
</div>
<div>
<div></div>
</div>
</body>
</html>