css3制作加载动画

CSS3 可以制作各种炫酷的动画，其中之一就是加载动画。下面我们来介绍一下如何使用CSS3 制作一个简单的加载动画。

.loader {
    display: inline-block;
    position: relative;
    width: 64px;
    height: 64px;
}
.loader:before,.loader:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}
.loader:before {
    background: #2980b9;
    transform: scale(0.8);
    animation: loader-1 1s infinite ease-in-out;
}
.loader:after {
    background: #27ae60;
    animation: loader-2 1s infinite ease-in-out;
}
@keyframes loader-1 {
0%, 100% {
     transform: scale(0.8);
 }
50% {
     transform: scale(1.2);
 }
}
@keyframes loader-2 {
0%, 100% {
     transform: translate(0, 0);
 }
50% {
     transform: translate(64px, 0);
 }
}
    

代码中的.loader就是动画的容器，我们通过设置它的宽高、包装与字体布局，让它能够在页面中显示。

我们还需要设置两个伪元素:before和:after。这两个元素是用来制作动画的两个圆形，每个圆形的样式都不同。我们使用了border-radius属性将它们设为圆形。

然后我们用 CSS3 的关键帧动画@keyframes来定义动画效果。在这个例子中，我们定义了两个关键帧动画，并将它们应用在对应的元素上，分别是loader-1和loader-2。

loader-1定义了一次缩放的动画，使得 圆形在不同的百分比情况下变换大小。

loader-2定义了一次位移的动画，使得 圆形在不同的百分比情况下沿着 X 轴方向进行位移。

最后应用在.loader:before和.loader:after上，我们就可以得到一个简单的加载动画了！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！