效果图
用到图片:
实现:
<body>
<div class="wrap">
<image class="figure" src="./staitc/images/figure.png" />
<image
class="circle circle-inner"
src="./staitc/images/circle-inner.png"
/>
<image
class="circle circle-outer"
src="./staitc/images/circle-removebg-preview.png"
/>
</div>
</body>
<style>
body {
display: flex;
align-items: center;
justify-content: center;
height: 90vh;
}
.wrap {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
}
.figure {
width: 188px;
height: auto;
margin-left: 60px;
z-index: 2;
}
.circle {
position: absolute;
top: 55px;
width: 380px;
height: auto;
transform: rotateX(70deg);
-ms-transform: rotateX(70deg);
-webkit-transform: rotateX(70deg);
}
.circle-inner {
width: 250px;
top: 118px;
animation: counterclockwiseRevolve 15s linear infinite;
}
.circle-outer {
animation: revolve 15s linear infinite;
}
@keyframes revolve {
from {
transform: rotateX(70deg) rotateZ(0);
}
to {
transform: rotateX(70deg) rotateZ(360deg);
}
}
@-webkit-keyframes revolve {
from {
transform: rotateX(70deg) rotateZ(0);
}
to {
transform: rotateX(70deg) rotateZ(360deg);
}
}
@keyframes counterclockwiseRevolve {
from {
transform: rotateX(70deg) rotateZ(360deg);
}
to {
transform: rotateX(70deg) rotateZ(0deg);
}
}
@-webkit-keyframes counterclockwiseRevolve {
from {
transform: rotateX(70deg) rotateZ(360deg);
}
to {
transform: rotateX(70deg) rotateZ(0deg);
}
}
</style>