html页面加载动画尺寸,6种CSS3加载动画

插件描述：6种CSS3炫酷预加载Loading，非常酷的纯CSS3炫酷预加载Loading指示器动画特效。这组loading指示器共6种效果，都是使用:before和:after伪元素，以及CSS帧动画来完成各种不同的预加载指示器动画。

实现方法

这是一组效果非常酷的纯CSS3炫酷预加载Loading指示器动画特效。这组loading指示器共6种效果，都是使用:before和:after伪元素，以及CSS帧动画来完成各种不同的预加载指示器动画。

使用方法

音频波形Loading动画

HTML结构

使用5个空的元素，每一个代表一条波形柱子。

CSS样式

音频波形Loading动画效果通过使每一条音频波形柱子的高度从5像素变化到30像素来完成。每一个span元素都被沿Y轴向下移动15像素，使动画动中心开始。#preloader_1{

position:relative;

}

#preloader_1 span{

display:block;

bottom:0px;

width: 9px;

height: 5px;

background:#9b59b6;

position:absolute;

animation: preloader_1 1.5s  infinite ease-in-out;

}

#preloader_1 span:nth-child(2){

left:11px;

animation-delay: .2s;

}

#preloader_1 span:nth-child(3){

left:22px;

animation-delay: .4s;

}

#preloader_1 span:nth-child(4){

left:33px;

animation-delay: .6s;

}

#preloader_1 span:nth-child(5){

left:44px;

animation-delay: .8s;

}

@keyframes preloader_1 {

0% {height:5px;transform:translateY(0px);background:#9b59b6;}

25% {height:30px;transform:translateY(15px);background:#3498db;}

50% {height:5px;transform:translateY(0px);background:#9b59b6;}

100% {height:5px;transform:translateY(0px);background:#9b59b6;}

}

通过分别为每一个span元素设置0.2秒的animation-delay动画延迟时间，使它们依次产生高度变化的动画效果。

圆形变矩形Loading动画

HTML结构

圆形变矩形Loading动画使用4个空的元素，每一个代表一个圆形/矩形。

CSS样式

该loading指示器动画通过修改border-radius属性来实现。#preloader_2 { position: relative; left: 50%; width: 40px; height: 40px; }

#preloader_2 span { display: block; bottom: 0px; width: 20px; height: 20px; background: #9b59b6; position: absolute; }

#preloader_2 span:nth-child(1) { animation: preloader_2_1 1.5s infinite ease-in-out; }

#preloader_2 span:nth-child(2) { left: 20px; animation: preloader_2_2 1.5s infinite ease-in-out; }

#preloader_2 span:nth-child(3) { top: 0px; animation: preloader_2_3 1.5s infinite ease-in-out; }

#preloader_2 span:nth-child(4) { top: 0px; left: 20px; animation: preloader_2_4 1.5s infinite ease-in-out; }

@-keyframes preloader_2_1 {

0% {

-transform: translateX(0px) translateY(0px) rotate(0deg);

border-radius:0px;

}

50% {

-transform: translateX(-20px) translateY(-10px) rotate(-180deg);

border-radius:20px;

background:#3498db;

}

80% {

-transform: translateX(0px) translateY(0px) rotate(-360deg);

border-radius:0px;

}

100% {

-transform: translateX(0px) translateY(0px) rotate(-360deg);

border-radius:0px;

}

}

@-keyframes preloader_2_2 {

0% {

-transform: translateX(0px) translateY(0px) rotate(0deg);

border-radius:0px;

}

50% {

-transform: translateX(20px) translateY(-10px) rotate(180deg);

border-radius:20px;

background:#f1c40f;

}

80% {

-transform: translateX(0px) translateY(0px) rotate(360deg);

border-radius:0px;

}

100% {

-transform: translateX(0px) translateY(0px) rotate(360deg);

border-radius:0px;

}

}

@-keyframes preloader_2_3 {

0% {

-transform: translateX(0px) translateY(0px) rotate(0deg);

border-radius:0px;

}

50% {

-transform: translateX(-20px) translateY(10px) rotate(-180deg);

border-radius:20px;

background:#2ecc71;

}

80% {

-transform: translateX(0px) translateY(0px) rotate(-360deg);

border-radius:0px;

}

100% {

-transform: translateX(0px) translateY(0px) rotate(-360deg);

border-radius:0px;

}

}

@-keyframes preloader_2_4 {

0% {

-transform: translateX(0px) translateY(0px) rotate(0deg);

border-radius:0px;

}

50% {

-transform: translateX(20px) translateY(10px) rotate(180deg);

border-radius:20px;

background:#e74c3c;

}

80% {

-transform: translateX(0px) translateY(0px) rotate(360deg);

border-radius:0px;

}

100% {

-transform: translateX(0px) translateY(0px) rotate(360deg);

border-radius:0px;

}

}

交叉图形变换Loading动画

HTML结构

该loading动画使用div元素的:before和:after为元素来制作。圆形变方形的动画通用是通过修改border-radius属性来实现。

CSS样式#preloader_3{

position:relative;

}

#preloader_3:before{

width:20px;

height:20px;

border-radius:20px;

background:blue;

content:'';

position:absolute;

background:#9b59b6;

animation: preloader_3_before 1.5s infinite ease-in-out;

}

#preloader_3:after{

width:20px;

height:20px;

border-radius:20px;

background:blue;

content:'';

position:absolute;

background:#2ecc71;

left:22px;

animation: preloader_3_after 1.5s infinite ease-in-out;

}

@keyframes preloader_3_before {

0% {transform: translateX(0px) rotate(0deg)}

50% {transform: translateX(50px) scale(1.2) rotate(260deg); background:#2ecc71;border-radius:0px;}

100% {transform: translateX(0px) rotate(0deg)}

}

@keyframes preloader_3_after {

0% {transform: translateX(0px)}

50% {transform: translateX(-50px) scale(1.2) rotate(-260deg);background:#9b59b6;border-radius:0px;}

100% {transform: translateX(0px)}

}

蛇形Loading动画

HTML结构

该loading动画使用div元素的:before和:after为元素来制作。圆形变方形的动画通用是通过修改border-radius属性来实现。

CSS样式

该动画通过修改每一个span元素的Y轴位置，使它们下移10个像素，并使它们的颜色从蓝色变为黄色。阴影效果则是修改box-shadow的尺寸来完成。#preloader_4{

position:relative;

}

#preloader_4 span{

position:absolute;

width:20px;

height:20px;

background:#3498db;

opacity:0.5;

border-radius:20px;

-animation: preloader_4 1s infinite ease-in-out;

}

#preloader_4 span:nth-child(2){

left:20px;

animation-delay: .2s;

}

#preloader_4 span:nth-child(3){

left:40px;

animation-delay: .4s;

}

#preloader_4 span:nth-child(4){

left:60px;

animation-delay: .6s;

}

#preloader_4 span:nth-child(5){

left:80px;

animation-delay: .8s;

}

@keyframes preloader_4 {

0% {

opacity: 0.3;

transform:translateY(0px);

box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);}

50% {

opacity: 1;

transform: translateY(-10px);

background:#f1c40f;

box-shadow: 0px 20px 3px rgba(0, 0, 0, 0.05);}

100%  {

opacity: 0.3;

transform:translateY(0px);

box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);}

}

旋转轮盘Loading动画

HTML结构

该loading动画使用div元素来制作中心的圆形，并使用div元素的:after伪元素来制作两条旋转线效果。

CSS样式

两条旋转线使用:after伪元素来制作，通过给它设置50像素的顶部和底部border-radius俩创建这两条线。动画效果添加在div元素上，修改它的颜色以及通过transform: rotate()来使它进行旋转。#preloader5{

position:relative;

width:30px;

height:30px;

background:#3498db;

border-radius:50px;

animation: preloader_5 1.5s infinite linear;

}

#preloader5:after{

position:absolute;

width:50px;

height:50px;

border-top:10px solid #9b59b6;

border-bottom:10px solid #9b59b6;

border-left:10px solid transparent;

border-right:10px solid transparent;

border-radius:50px;

content:'';

top:-20px;

left:-20px;

animation: preloader_5_after 1.5s infinite linear;

}

@keyframes preloader_5 {

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

50% {transform: rotate(180deg);background:#2ecc71;}

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

}

@keyframes preloader_5_after {

0% {border-top:10px solid #9b59b6;border-bottom:10px solid #9b59b6;}

50% {border-top:10px solid #3498db;border-bottom:10px solid #3498db;}

100% {border-top:10px solid #9b59b6;border-bottom:10px solid #9b59b6;}

}

windows标志Loading动画

HTML结构

每一个span代表一个方块。

CSS样式

所有的方块以网格进行布局。动画添加在主div元素上，使它产生旋转。另外i一个动画是使各个span元素不断的从100%缩放到50%。并通过animation-delay来控制各个span的动画延迟时间。#preloader_6{

position:relative;

width: 42px;

height: 42px;

animation: preloader_6 5s infinite linear;

}

#preloader_6 span{

width:20px;

height:20px;

position:absolute;

background:red;

display:block;

animation: preloader_6_span 1s infinite linear;

}

#preloader_6 span:nth-child(1){

background:#2ecc71;

}

#preloader_6 span:nth-child(2){

left:22px;

background:#9b59b6;

animation-delay: .2s;

}

#preloader_6 span:nth-child(3){

top:22px;

background:#3498db;

animation-delay: .4s;

}

#preloader_6 span:nth-child(4){

top:22px;

left:22px;

background:#f1c40f;

animation-delay: .6s;

}

@keyframes preloader_6 {

from {-ms-transform: rotate(0deg);}

to {-ms-transform: rotate(360deg);}

}

@keyframes preloader_6_span {

0% { transform:scale(1); }

50% { transform:scale(0.5); }

100% { transform:scale(1); }

}