<!DOCTYPEhtml>
<htmllang="zh-CN">
<head>
<metacharset="UTF-8">
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
}
body{
height:100vh;
display:flex;
justify-content:center;
align-items:center;
background-color:rgb(4,6,17);
}
.container{
position:relative;
width:20px;
height:20px;
transform-style:preserve-3d;
transform:perspective(500px)rotateX(50deg)translateZ(50px);
}
.containerspan{
position:absolute;
top:calc(-9px*var(--i));
left:calc(-9px*var(--i));
bottom:calc(-9px*var(--i));
right:calc(-9px*var(--i));
border:5pxsolidrgba(0,162,255,0.8);
box-shadow:06px0rgb(0,162,255),
inset06px0rgba(0,162,255,.9);
/*background-color:rgba(0,162,255,0);*/
border-radius:50%;
animation:move1.5sease-in-outinfinitealternate;
animation-delay:calc(var(--i)*0.1s);
}
@keyframesmove{
0%,100%{
transform:translateZ(0px);
}
50%{
transform:translateZ(-100px);
}
}
</style>
</head>
<body>
<divclass="container">
<spanstyle="--i:1;"></span>
<spanstyle="--i:2;"></span>
<spanstyle="--i:3;"></span>
<spanstyle="--i:4;"></span>
<spanstyle="--i:5;"></span>
<spanstyle="--i:6;"></span>
<spanstyle="--i:7;"></span>
<spanstyle="--i:8;"></span>
<spanstyle="--i:9;"></span>
<spanstyle="--i:10;"></span>
</div>
</body>
</html>
|