CSS3效果：5种预载动画效果

实现如图所示的动画效果：

预载动画一：双旋圈

在两个不同方向旋转的圆圈。我们对内圈的转速定义了一个CSS代码，即内圈比外圈的速率快2倍。
实现如图所示：

html代码：

<body style="background: #ffb83c;">
    div id="preloader-1">
        span></</div>
body>

css代码：

#preloader-1{
    position: relative;
}
#preloader-1 span{ absolute;
    border:8px solid #fff;
    border-top:8px solid transparent;
    border-radius: 999px;
}
#preloader-1 span:nth-child(1){
    width:80px;
    height: 80px;
    animation: spin-1 2s infinite linear;
}
#preloader-1 span:nth-child(2){
    top:20px;
    left:40px; 40px; spin-2 1s infinite linear;
}
@keyframes spin-1{
    0%{transform: rotate(360deg); opacity: 1.0;}
    50%{transform: rotate(180deg); 0.5;}
    100%{ rotate(0deg);opacity: 0;}
}
@keyframes spin-2{ 1;}
}

预载动画二：交错圈

两个圆圈进行横向交错来回移动。每个圆圈都设置了单独的反向移动动画参数。
效果：

html代码：

="background: #4ad3b4;"="preloader-2"#preloader-2{
#preloader-2 span{30px; 30px;
    background: #fff;
#preloader-2 span:nth-child(1){ cross-1 1.5s infinite linear;
}
#preloader-2 span:nth-child(2){ cross-2 1.5s infinite linear;
}
@keyframes cross-1{ translateX(0); translateX(80px);
}
@keyframes cross-2{
}

预载动画三：旋转圈

效果：

html代码：

="background: #ab69d9;"="preloader-3"#preloader-3{ relative;4px solid rgba(255,.25); 999px;
    
}
#preloader-3 span{4px solid transparent;4px solid #fff; 999px;-4px; rotate 1s infinite linear;
}
@keyframes rotate{ rotate(0deg);} rotate(360deg);}
}

预载动画四：跳动圈

这是一种墨西哥波浪纹的动画效果，通过设置不同圆圈之间的延迟参数来实现。
效果：

html代码：

="background: #c1d64a;"="preloader-4"#preloader-4{
#preloader-4 span{absolute;16px; 16px; bounce 1s infinite linear;
}
#preloader-4 span:nth-child(1){0;
    animation-delay: 0s;
}
#preloader-4 span:nth-child(2){ 0.25s;
}
#preloader-4 span:nth-child(3){ 0.5s;
}
#preloader-4 span:nth-child(4){60px; 0.75s;
}
#preloader-4 span:nth-child(5){ 1.0s;
}
@keyframes bounce{ translateY(0px); translateY(-30px);
}

预载动画五：雷达圈

一种雷达辐射效果，给3个span elements设置相同的淡入淡出效果，再予每个稍微延迟下即可实现。
效果：

html代码：

="background: #f9553f;"="preloader-5"#preloader-5{
#preloader-5 span{50px; 50px;5px solid #fff;
    opacity: 0; radar 2s infinite linear;
}
#preloader-5 span:nth-child(1){
#preloader-5 span:nth-child(2){
    
    animation-delay: 0.66s;
}
#preloader-5 span:nth-child(3){ 1.33s;
}

@keyframes radar{ scale(0);
    25%{ scale(1);
    75%{ scale(1.5); scale(2);
}

CSS3效果：5种预载动画效果

预载动画一：双旋圈

预载动画二：交错圈

预载动画三：旋转圈

预载动画四：跳动圈

预载动画五：雷达圈

相关文章