html加载特效大全,10种炫酷的CSS3 loading加载动画特效

这是一组效果非常炫酷的纯CSS3 loading加载动画特效。这组loading动画共10种不同的效果，全部使用animation帧动画制作而成。这些特效代码简洁，效果炫酷，非常值得学习借鉴。

制作方法

HTML结构

所有的loading效果都使用相同的HTML结构：使用元素作为包裹元素，里面放置用于动画的div.spinner元素。各种动画效果均由div.spinner元素元素和它的:before和:after伪元素制作。

CSS样式

特效中为spinner元素设置了一些同于样式：宽度和高度均为50像素，相对于section绝对定位。

.spinner {

width: 50px;

height: 50px;

border-radius: 100%;

margin: auto;

position: absolute;

left: 0;

right: 0;

top: 0;

bottom: 0;

margin: auto;

}

在第一种loading效果中，section的背景设置为褐色。spinner元素执行color-bubble帧动画。这个帧动画修改元素的颜色。

.model-1 {

background: #202020;

}

.model-1 .spinner {

color: #f00;

-webkit-animation: color-bubble 2s linear 0s infinite;

animation: color-bubble 2s linear 0s infinite;

}

为了制作圆形光波扩展效果，这个特效中使用spinner元素的:before和:after伪元素来制作。通过spinner-bubble帧动画来修改它们的大小和透明度。

.model-1 .spinner:after, .model-1 .spinner:before {

content: '';

position: absolute;

left: 0;

right: 0;

top: 0;

bottom: 0;

border-radius: 100%;

box-shadow: 0 0 0 3px;

-webkit-animation: spinner-bubble 1.3s linear 0s infinite;

animation: spinner-bubble 1.3s linear 0s infinite;

margin: auto;

width: 10px;

height: 10px;

opacity: 0;

}

.model-1 .spinner:before {

-webkit-animation: spinner-bubble 1.3s linear 2s infinite;

animation: spinner-bubble 1.3s linear 2s infinite;

}

其它效果的制作方法基本类似，可以参考下载文件的styles.css文件。