Results preview
Press the "click Preview" button to the right of the current page preview, click on the link full-screen preview.
https://codepen.io/zhang-ou/pen/vjLQMM
Interactive video tutorials
This video is interactive, you can pause the code video, editing video.
Please use chrome, safari, edge open view.
Source code download
Please download from github.
Code Reading
Define dom, a span of three containers comprising:
<div class="loader">
<span></span>
<span></span>
<span></span>
</div>
Centered:
html, body {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: black;
}
Sized containers:
.loader {
width: 150px;
height: 150px;
position: relative;
}
Set the border style rectangle:
.loader span {
position: absolute;
box-sizing: border-box;
border: 10px solid dimgray;
border-radius: 2px;
}
Provided with three rectangular dimensions:
.loader span:nth-child(1) {
width: 100%;
height: 100%;
}
.loader span:nth-child(2) {
width: 70%;
height: 70%;
margin: 15%;
}
.loader span:nth-child(3) {
width: 40%;
height: 40%;
margin: 30%;
}
Drawing the upper left and lower right of the pseudo trim elements:
.loader span::before,
.loader span::after {
content: '';
position: absolute;
width: 10px;
height: 50%;
background-color: gold;
}
.loader span::before {
top: -10px;
left: -10px;
}
.loader span::after {
bottom: -10px;
right: -10px;
}
Custom animation effects:
@keyframes rotating {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(360deg);
}
}
The animation is applied to the three rectangles:
.loader span {
animation: rotating linear infinite;
}
.loader span:nth-child(1) {
animation-duration: 4s;
}
.loader span:nth-child(2) {
animation-duration: 2s;
}
.loader span:nth-child(3) {
animation-duration: 1s;
}
Finally, the rectangle is provided at three stacking order:
.loader span:nth-child(1) {
z-index: 3;
}
.loader span:nth-child(2) {
z-index: 2;
}
.loader span:nth-child(3) {
z-index: 1;
}
We're done!
Knowledge Point
- @keyframes https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes
- animation-duration https://developer.mozilla.org/en-US/docs/Web/CSS/animation-duration
- rotateY https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotateY
- nth-child https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child
- z-index https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
- ::before https://developer.mozilla.org/en-US/docs/Web/CSS/::before
- ::after https://developer.mozilla.org/en-US/docs/Web/CSS/::after