HTML显示波形,CSS3波形loading动画特效

这是一款使用CSS3制作的波形loading动画特效。这组波形loading动画特效共有11种波形动画，分别使用不同的CSS3 animation动画来实现。

使用方法

在页面中引入style.css文件。

HTML结构

每一个loading动画都是由一个

元素包裹10个子

元素组成。

CSS样式

loading动画的通用样式如下：

[class^="shaft-load"] {

margin: 50px auto;

width: 60px;

height: 30px;

}

[class^="shaft-load"] > div {

float: left;

background: #893878;

height: 100%;

width: 5px;

margin-right: 1px;

display: inline-block;

}

实现第一种波形动画的CSS样式如下：

[class^="shaft-load"] .shaft1 {

-webkit-animation-delay: 0.05s;

-moz-animation-delay: 0.05s;

-o-animation-delay: 0.05s;

animation-delay: 0.05s;

}

/* Shaft 1 */

.shaft-load > div {

background-color: #5d8341;

-webkit-animation: loading 1.5s infinite ease-in-out;

-moz-animation: loading 1.5s infinite ease-in-out;

-o-animation: loading 1.5s infinite ease-in-out;

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

-webkit-transform: scaleY(0.05) translateX(-10px);

-moz-transform: scaleY(0.05) translateX(-10px);

-ms-transform: scaleY(0.05) translateX(-10px);

-o-transform: scaleY(0.05) translateX(-10px);

transform: scaleY(0.05) translateX(-10px);

}

@-webkit-keyframes loading {

50% {

-webkit-transform: scaleY(1.2) translateX(10px);

-moz-transform: scaleY(1.2) translateX(10px);

-ms-transform: scaleY(1.2) translateX(10px);

-o-transform: scaleY(1.2) translateX(10px);

transform: scaleY(1.2) translateX(10px);

background-color: #9dc182;

}

}

@-moz-keyframes loading {

50% {

-webkit-transform: scaleY(1.2) translateX(10px);

-moz-transform: scaleY(1.2) translateX(10px);

-ms-transform: scaleY(1.2) translateX(10px);

-o-transform: scaleY(1.2) translateX(10px);

transform: scaleY(1.2) translateX(10px);

background-color: #9dc182;

}

}

@-o-keyframes loading {

50% {

-webkit-transform: scaleY(1.2) translateX(10px);

-moz-transform: scaleY(1.2) translateX(10px);

-ms-transform: scaleY(1.2) translateX(10px);

-o-transform: scaleY(1.2) translateX(10px);

transform: scaleY(1.2) translateX(10px);

background-color: #9dc182;

}

}

@keyframes loading {

50% {

-webkit-transform: scaleY(1.2) translateX(10px);

-moz-transform: scaleY(1.2) translateX(10px);

-ms-transform: scaleY(1.2) translateX(10px);

-o-transform: scaleY(1.2) translateX(10px);

transform: scaleY(1.2) translateX(10px);

background-color: #9dc182;

}

}

其它loading动画效果请参考下载文件。