css3开发系列---画漂亮的loading图
接上篇
效果图:
实现关键:css3中border-radius(画圆),animation(动画),linear-gradient(线性渐变)
实现步骤:(注意先将DIV在页面中布局好,第一个DIV在最外面,第二个DIV在第一个里面,第三个DIV在最里面,一定要控件好相互间的间距)
1. 定义3个DIV(全部绝对定位)
1 <div></div>
2 <div></div>
3 <div></div>
2.定义body和DIV的样式
1 body {
2 background-color: rgb(173,173,173);
3 }
4 body div{
5 position: absolute;
6 }
3.定义第一个DIV的样式
1 body > div:first-child {
2 border-radius:100px;
3 width:100px;
4 height:100px;
5 border-bottom-color: red;
6 border-bottom-style:solid;
7 -webkit-animation-name: loading_animate_01; /*动画名称*/
8 -webkit-animation-duration: 2s; /*动画持续时间*/
9 -webkit-animation-delay: 0s; /*延迟时间*/
10 -webkit-animation-iteration-count: infinite;
11 }
4.定义第二个和第三个DIV的样式
1 body > div:nth-of-type(2){
2 border-radius:80px;
3 margin-top:10px;
4 margin-left:10px;
5 width:80px;
6 height:80px;
7 border-top-color: yellow;
8 border-top-style:solid;
9 -webkit-animation-name: loading_animate_02; /*动画名称*/
10 -webkit-animation-duration:2s; /*动画持续时间*/
11 -webkit-animation-delay: 0s; /*延迟时间*/
12 -webkit-animation-iteration-count: infinite;
13 }
14 body > div:nth-of-type(3){
15 border-radius:60px;
16 margin-top:35px;
17 margin-left:35px;
18 width:30px;
19 height:30px;
20 /*背景从上往下渐变*/
21 background: -webkit-linear-gradient(top, rgb(210, 210, 210) 0%, white
22 100% );
23
24 }
5.定义第一个DIV和第二个DIV的旋转动画
1 @-webkit-keyframes loading_animate_01 {
2 0% {
3 -webkit-transform: rotate(0deg);
4 }
5 10% {
6 -webkit-transform: rotate(36deg);
7 }
8 20% {
9 -webkit-transform: rotate(72deg);
10 }
11 30% {
12 -webkit-transform: rotate(108deg);
13 }
14 40% {
15 -webkit-transform: rotate(144deg);
16 }
17 50% {
18 -webkit-transform: rotate(180deg);
19 }
20 60% {
21 -webkit-transform: rotate(216deg);
22 }
23 70% {
24 -webkit-transform: rotate(252deg);
25 }
26 80% {
27 -webkit-transform: rotate(288deg);
28 }
29 90% {
30 -webkit-transform: rotate(324deg);
31 }
32 100% {
33 -webkit-transform: rotate(360deg);
34 }
35 }
36
37 @-webkit-keyframes loading_animate_02 {
38 0% {
39 -webkit-transform: rotate(0deg);
40 }
41 10% {
42 -webkit-transform: rotate(-36deg);
43 }
44 20% {
45 -webkit-transform: rotate(-72deg);
46 }
47 30% {
48 -webkit-transform: rotate(-108deg);
49 }
50 40% {
51 -webkit-transform: rotate(-144deg);
52 }
53 50% {
54 -webkit-transform: rotate(-180deg);
55 }
56 60% {
57 -webkit-transform: rotate(-216deg);
58 }
59 70% {
60 -webkit-transform: rotate(-252deg);
61 }
62 80% {
63 -webkit-transform: rotate(-288deg);
64 }
65 90% {
66 -webkit-transform: rotate(-324deg);
67 }
68 100% {
69 -webkit-transform: rotate(-360deg);
70 }
71 }
