Let’s look at the effect first. The circle in the middle is a 3D effect and rotates.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta http-equiv="Page-Enter" Content="revealTrans(duration=x, transition=y)">
<style>
.page-wapper {
width: 200px;
height: 200px;
border: 1px solid #ccc;
position: relative;
}
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
border: 1px solid red;
width: 100px;
height: 100px;
background: #000;
}
.round {
position: absolute;
line-height: 100px;
border-radius: 50%;
text-align: center;
color: #fff;
}
.r-01 {
transform: rotateX(75deg);
top: 0px;
width: 100px;
height: 100px;
animation:turn 10s linear infinite;
border: 1px solid rgba(25, 78, 107, 0.8);
box-shadow: 0 0 5px #2bc1ff inset;
}
.r-02 {
transform: rotateX(75deg);
top: -5px;
width: 100px;
height: 100px;
animation:turn 10s linear infinite;
border: 1px solid rgba(49, 208, 254, 0.9);
box-shadow: 0 0 20px #2bc1ff inset;
}
.r-03 {
transform: rotateX(75deg);
top: -15px;
width: 100px;
height: 100px;
animation:turn 10s linear infinite;
border: 1px solid rgba(49,254,145,0.7);
box-shadow: 0 0 43px rgba(49,254,145,0.38) inset;
}
@keyframes turn {
0% {
transform: rotateX(75deg) rotateZ(0deg);
}
100% {
transform: rotateX(75deg) rotateZ(360deg);
}
}
</style>
</head>
<body>
<div class="page-wapper">
<div class="box">
<div class="round r-01">圆形</div>
<div class="round r-02">圆形</div>
<div class="round r-03">圆形</div>
</div>
</div>
</body>
</html>
<script>
</script>