CSS3小球循环转圈加载特效

1、新建html文档。

2、书写hmtl代码。

<div class="loader">

 <div class="dot">1</div>

 <div class="dot">2</div>

 <div class="dot">3</div>

 <div class="dot">4</div>

 <div class="dot">5</div>

</div>

3、初始化css代码。

<style>

body { text-align: center; background-color: #eee; }

* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0 }

</style>

4、书写css代码。

.loader { position: absolute; top: 50%; left: 50%; width: 200px; height: 200px; margin-top: -100px; margin-left: -100px; perspective: 100px; transform-type: preserve-3d; an    imation: loader 6s cubic-bezier(0, 0, 1, 1) infinite; }

@keyframes loader {  0% { transform: rotateX(30deg) rotateZ(0deg);} 100% { transform: rotateX(30deg) rotateZ(-360deg);}}

.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); an    imation: dot1 1.5s cubic-bezier(.6, 0, .4, 1) infinite; }

.dot:nth-child(2) { transform: rotateZ(15deg); an    imation-name: dot2; an    imation-delay: 150ms; background-color: #2d556d; }

.dot:nth-child(3) { transform: rotateZ(0deg); an    imation-name: dot3; an    imation-delay: 300ms; background-color: #447891; }

.dot:nth-child(4) { transform: rotateZ(-15deg); an    imation-name: dot4; an    imation-delay: 450ms; background-color: #5998b2; }

.dot:nth-child(5) { transform: rotateZ(-30deg); an    imation-name: dot5; an    imation-delay: 600ms; background-color: #6bb2cd; }

@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);}}

5、代码整体结构。

6、查看效果。