利用keyframes实现加载动画
CSS动画是CSS3的新特性，想用动画做一个简单的页面加载动画。
首先建一个盒子用于装四个小正方形，并用 Grid 布局让正方形2x2排列。因为要让四个正方形绕中心旋转，则给父元素加上旋转动画，为了让旋转之间有停顿，因此旋转从20再开始。
为了让四个正方形从中间分散，直接改变父元素 grid-gap 则可实现。最后给正方形在加上 border-radius 看起来就更加和谐了。
HTML
<div class="load_keyframes_body">
<div class="load_keyframes_content">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>CSS
.load_keyframes_body {
height: 200px;
display: flex;
justify-content: center;
align-items: center;
}
.load_keyframes_content {
grid-gap: 10px;
display: grid;
grid-template-columns: 50px 50px;
grid-template-rows: 50px 50px;
animation: load_transform 1s ease infinite;
}
.load_keyframes_content div {
border-radius: 10px;
background-color: #00bbff;
}
@keyframes load_transform {
0% {
grid-gap: 10px;
transform: rotate(0deg);
}
30% {
transform: rotate(0deg);
}
50% {
grid-gap: 40px;
}
70% {
transform: rotate(90deg);
}
100% {
grid-gap: 10px;
transform: rotate(90deg);
}
}