php动画效果,CSS3动画（一）：5种预载动画效果

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

预载动画一：双旋圈

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

实现如图所示：

html代码：

css代码：

#preloader-1{

position: relative;

}#preloader-1 span{

position: 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:20px;

width:40px;

height: 40px;

animation: spin-2 1s infinite linear;

}@keyframes spin-1{

0%{transform: rotate(360deg); opacity: 1.0;}

50%{transform: rotate(180deg); opacity: 0.5;}

100%{transform: rotate(0deg);opacity: 0;}}

@keyframes spin-2{

0%{transform: rotate(0deg); opacity: 0.5;}

50%{transform: rotate(180deg); opacity: 1;}

100%{transform: rotate(360deg);opacity: 0.5;}}

预载动画二：交错圈

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

效果：

html代码：

css代码：

#preloader-2{

position: relative;

}#preloader-2 span{

position: absolute;

width:30px;

height: 30px;

background: #fff;

border-radius: 999px;

}#preloader-2 span:nth-child(1){

animation: cross-1 1.5s infinite linear;

}#preloader-2 span:nth-child(2){

animation: cross-2 1.5s infinite linear;

}@keyframes cross-1{

0%{transform: translateX(0); opacity: 0.5;}

50%{transform: translateX(80px); opacity: 1;}

100%{transform: translateX(0);opacity: 0.5;}}

@keyframes cross-2{

0%{transform: translateX(80px); opacity: 0.5;}

50%{transform: translateX(0); opacity: 1;}

100%{transform: translateX(80px);opacity: 0.5;}}

预载动画三：旋转圈

效果：

html代码：

css代码：

#preloader-3{

position: relative;

width:80px;

height: 80px;

border:4px solid rgba(255,255,255,.25);

border-radius: 999px;

}#preloader-3 span{

position: absolute;

width:80px;

height:80px;

border:4px solid transparent;

border-top:4px solid #fff;

border-radius: 999px;

top:-4px;

left:-4px;

animation: rotate 1s infinite linear;

}@keyframes rotate{

0%{transform: rotate(0deg);}

100%{transform: rotate(360deg);}}

预载动画四：跳动圈

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

效果：

html代码：

css代码：

#preloader-4{

position: relative;

}#preloader-4 span{

position:absolute;

width:16px;

height: 16px;

border-radius: 999px;

background: #fff;

animation: bounce 1s infinite linear;

}#preloader-4 span:nth-child(1){

left:0;

animation-delay: 0s;

}#preloader-4 span:nth-child(2){

left:20px;

animation-delay: 0.25s;

}#preloader-4 span:nth-child(3){

left:40px;

animation-delay: 0.5s;

}#preloader-4 span:nth-child(4){

left:60px;

animation-delay: 0.75s;

}#preloader-4 span:nth-child(5){

left:80px;

animation-delay: 1.0s;

}@keyframes bounce{

0%{transform: translateY(0px);opacity: 0.5;}

50%{transform: translateY(-30px);opacity: 1.0;}

100%{transform: translateY(0px);opacity: 0.5;}}

预载动画五：雷达圈

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

效果：

html代码：

css代码：

#preloader-5{

position: relative;

}#preloader-5 span{

position:absolute;

width:50px;

height: 50px;

border:5px solid #fff;

border-radius: 999px;

opacity: 0;

animation: radar 2s infinite linear;

}#preloader-5 span:nth-child(1){

animation-delay: 0s;

}#preloader-5 span:nth-child(2){

animation-delay: 0.66s;

}#preloader-5 span:nth-child(3){

animation-delay: 1.33s;

}@keyframes radar{

0%{transform: scale(0);opacity: 0;}

25%{transform: scale(0);opacity: 0.5;}

50%{transform: scale(1);opacity: 1.0;}

75%{transform: scale(1.5);opacity: 0.5;}

100%{transform: scale(2);opacity: 0;}}

更多CSS3动画(一)：5种预载动画效果 相关文章请关注PHP中文网！

相关标签：CSS3

本文原创发布php中文网，转载请注明出处，感谢您的尊重！