<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3小球循环转圈加载特效 - 网页模板</title>
<style>
/**
* Document defaults
*/
body {
text-align: center;
background-color: #eee;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* The loader container */
.loader {
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
margin-top: -100px;
margin-left: -100px;
perspective: 100px;
transform-type: preserve-3d;
animation: loader 6s cubic-bezier(0,0,1,1) infinite;
}
/* Loader animation */
@keyframes loader {
0% {
transform: rotateX(30deg) rotateZ(0deg);
}
100% {
transform: rotateX(30deg) rotateZ(-360deg);
}
}
/* The dot */
.dot {
position: absolute;
top: 50%;
left: 50%;
z-index: 10;
width: 20px;
height: 20px;
margin-top: -90px;
margin-left: -10px;
border-radius: 10px;
background-color: #1e3f57;
transform-type: preserve-3d;
transform-origin: 50% 90px;
transform: rotateZ(30deg);
animation: dot1 1.5s cubic-bezier(.6,0,.4,1) infinite;
}
.dot:nth-child(2) {
transform: rotateZ(15deg);
animation-name: dot2;
animation-delay: 150ms;
background-color: #2d556d;
}
.dot:nth-child(3) {
transform: rotateZ(0deg);
animation-name: dot3;
animation-delay: 300ms;
background-color: #447891;
}
.dot:nth-child(4) {
transform: rotateZ(-15deg);
animation-name: dot4;
animation-delay: 450ms;
background-color: #5998b2;
}
.dot:nth-child(5) {
transform: rotateZ(-30deg);
animation-name: dot5;
animation-delay: 600ms;
background-color: #6bb2cd;
}
/* Dot animations */
@keyframes dot1 {
0% {
transform: rotateZ(30deg) rotateX(10deg);
}
95%, 100% {
transform: rotateZ(390deg) rotateX(10deg);
}
}
@keyframes dot2 {
0% {
transform: rotateZ(15deg) rotateX(10deg);
}
95%, 100% {
transform: rotateZ(375deg) rotateX(10deg);
}
}
@keyframes dot3 {
0% {
transform: rotateZ(0deg) rotateX(10deg);
}
95%, 100% {
transform: rotateZ(360deg) rotateX(10deg);
}
}
@keyframes dot4 {
0% {
transform: rotateZ(-15deg) rotateX(10deg);
}
95%, 100% {
transform: rotateZ(345deg) rotateX(10deg);
}
}
@keyframes dot5 {
0% {
transform: rotateZ(-30deg) rotateX(10deg);
}
95%, 100% {
transform: rotateZ(330deg) rotateX(10deg);
}
}
</style>
<script src="js/prefixfree.min.js"></script>
</head>
<body>
<div class="loader">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器:360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
<p>来源:<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p>
</div>
</body>
</html>