html5定义特殊弹出效果,CSS3+HTML5特效7 - 特殊的 Loading 效果

效果如下

实现原理：

使用CSS3的animation效果完成滚动切换。

代码说明：

样式表中@-webkit-keyframes及@keyframes定义了旋转360度的操作；

样式表中.border div定义了div的基本样式，红色的10px圆形；

10个div嵌套使用;

@-webkit-keyframes rotate {

100% {

-webkit-transform: rotate(-360deg);

}

}

@keyframes rotate {

100% {

transform: rotate(-360deg);

}

}

.border{

position: absolute;

top: 10px;

left: 10px;

width: 300px;

height: 300px;

border: 1px solid #ccc;

}

.border div {

position: absolute;

top: 50%;

left: 50%;

width: 10px;

height: 10px;

border-radius: 50%;

box-shadow: 0px 30px #FF0000;

-webkit-animation: rotate 8s infinite linear ;

animation: rotate 8s infinite linear ;

}

原文：http://www.cnblogs.com/z-gia/p/3708968.html