以下为HTML部分代码,非常简单
<!-- From zuisao.com -->
<div class="spinner">
<div></div>
<div></div>
<div></div>
<div></div>
以下为部分CSS代码
/* From zuisao.com */
.spinner {
width: 70.4px;
height: 70.4px;
--clr: rgb(247, 197, 159);
--clr-alpha: rgb(247, 197, 159,.1);
animation: spinner 1.6s infinite ease;
transform-style: preserve-3d;
}
.spinner > div {
background-color: var(--clr-alpha);
height: 100%;
position: absolute;
width: 100%;
border: 3.5px solid var(--clr);
}
.spinner div:nth-of-type(1) {
transform: translateZ(-35.2px) rotateY(180deg);
}
.spinner div:nth-of-type(2) {
transform: rotateY(-270deg) translateX(50%);