一)第一种方法

(1)HTML结构

1 <body>  
2    <div class="animate wave"> 
3     <div class="w1"></div> 
4     <div class="w2"></div> 
5     <div class="w3"></div> 
6     <div class="w4"></div> 
7    </div> 
8 </body>

(2)CSS样式

 1 <style type="text/css"> 
 2     html{ 
 3         font-size: 20px; 
 4     } 
 5       body{ 
 6           background:#444; 
 7       } 
 8     @-webkit-keyframes opac{ 
 9         from { 
10             opacity: 1; 
11             width:0; 
12             height:0; 
13             top:50%; 
14             left:50%; 
15         } 
16         to { 
17             opacity : 0; 
18             width:100%; 
19             height:100%; 
20             top:0; 
21             left:0; 
22         } 
23     } 
24     .animate .w2{ 
25         -webkit-animation-delay:1s; 
26     } 
27     .animate .w3{ 
28         -webkit-animation-delay:2s; 
29     } 
30     .animate .w4{ 
31         -webkit-animation-delay:3s; 
32     } 
33     .wave{ 
34         width: 22.7rem; 
35         height: 22.7rem; 
36         position: absolute; 
37         top: 0; 
38         left: 0; 
39         right: 0; 
40         margin: 0 auto; 
41     } 
42     .wave *{ 
43         border:1px solid #fff; 
44         position:absolute; 
45         border-radius:50%; 
46         -webkit-animation:opac 4s infinite; 
47     } 
48     </style>

(二)第二种方法

     (1)HTML结构

1 <body> 
2 <div class="circle"> 
3     <div class="c1"></div> 
4     <div class="c2"></div> 
5     <div class="c3"></div> 
6 </div> 
7 </body>

  (2)CSS样式

 1  <style> 
 2         body{ 
 3             background:gold; 
 4         } 
 5   
 6         .circle { 
 7             position:absolute; 
 8             left:0; 
 9             top:0; 
10             right: 0; 
11             margin: 0 auto; 
12             width:90px; 
13             height:90px 
14   
15         } 
16         .circle div { 
17             position:absolute; 
18             top:50%; 
19             left:50%; 
20             background:#fff; 
21             width:90px; 
22             height:90px; 
23             margin-left:-45px; 
24             margin-top:-45px; 
25             opacity:1; 
26             border-radius:90px; 
27             animation: 1.2s linear infinite; 
28             -webkit-animation: 1.2s linear infinite; 
29             -ms--webkit-animation: 1.2s linear infinite; 
30             -moz--webkit-animation: 1.2s linear infinite; 
31             -o--webkit-animation: 1.2s linear infinite;
 1   
 2            /* 此部分是上面动画的分开表示方法,推荐使用简写的方式-webkit-animation-duration:1.2s; 
 3             -webkit-animation-timing-function:linear; 
 4             -webkit-animation-iteration-count:infinite; 
 5             -ms-animation-duration:1.2s; 
 6             -ms-animation-timing-function:linear; 
 7             -ms-animation-iteration-count:infinite; 
 8             -moz-animation-duration:1.2s; 
 9             -moz-animation-timing-function:linear; 
10             -moz-animation-iteration-count:infinite; 
11             -o-animation-duration:1.2s; 
12             -o-animation-timing-function:linear; 
13             -o-animation-iteration-count:infinite; 
14             animation-duration:1.2s; 
15             animation-timing-function:linear; 
16             animation-iteration-count:infinite;*/
  1   
  2         } 
  3         .circle div.c1 { 
  4             width:20px; 
  5             height:20px; 
  6             margin-left:-10px; 
  7             margin-top:-10px; 
  8             opacity:1; 
  9             border-radius:90px 
 10         } 
 11         .circle div.c2 { 
 12             -webkit-animation-name:c2; 
 13             -webkit-animation-delay:.6s; 
 14             -ms-animation-name:c2; 
 15             -ms-animation-delay:.6s; 
 16             -moz-animation-name:c2; 
 17             -moz-animation-delay:.6s; 
 18             -o-animation-name:c2; 
 19             -o-animation-delay:.6s; 
 20             animation-name:c2;   
 21             animation-delay:.6s;  
 22         } 
 23         .circle div.c3 { 
 24             -webkit-animation-name:c2; 
 25             -webkit-animation-delay:1.2s; 
 26             -ms-animation-name:c2; 
 27             -ms-animation-delay:1.2s; 
 28             -moz-animation-name:c2; 
 29             -moz-animation-delay:1.2s; 
 30             -o-animation-name:c2; 
 31             -o-animation-delay:1.2s; 
 32             animation-name:c2;  
 33             animation-delay:1.2s; 
 34         } 
 35         @-webkit-keyframes c2 { 
 36             0% { 
 37                 -webkit-transform:scale(.222); 
 38                 -ms-transform:scale(.222); 
 39                 -moz-transform:scale(.222); 
 40                 -o-transform:scale(.222); 
 41                 transform:scale(.222); 
 42                 opacity:1 
 43             } 
 44             50% { 
 45                 -webkit-transform:scale(.622); 
 46                 -ms-transform:scale(.622); 
 47                 -moz-transform:scale(.622); 
 48                 -o-transform:scale(.622); 
 49                 transform:scale(.622); 
 50                 opacity:.4 
 51             } 
 52             98% { 
 53                 -webkit-transform:scale(1); 
 54                 -ms-transform:scale(1); 
 55                 -moz-transform:scale(1); 
 56                 -o-transform:scale(1); 
 57                 transform:scale(1); 
 58                 opacity:.2 
 59             } 
 60             100% { 
 61                 opacity:0 
 62             } 
 63         } 
 64         @-ms-keyframes c2 { 
 65             0% { 
 66                 -webkit-transform:scale(.222); 
 67                 -ms-transform:scale(.222); 
 68                 -moz-transform:scale(.222); 
 69                 -o-transform:scale(.222); 
 70                 transform:scale(.222); 
 71                 opacity:1 
 72             } 
 73             50% { 
 74                 -webkit-transform:scale(.622); 
 75                 -ms-transform:scale(.622); 
 76                 -moz-transform:scale(.622); 
 77                 -o-transform:scale(.622); 
 78                 transform:scale(.622); 
 79                 opacity:.4 
 80             } 
 81             98% { 
 82                 -webkit-transform:scale(1); 
 83                 -ms-transform:scale(1); 
 84                 -moz-transform:scale(1); 
 85                 -o-transform:scale(1); 
 86                 transform:scale(1); 
 87                 opacity:.2 
 88             } 
 89             100% { 
 90                 opacity:0 
 91             } 
 92         } 
 93         @-moz-keyframes c2 { 
 94             0% { 
 95                 -webkit-transform:scale(.222); 
 96                 -ms-transform:scale(.222); 
 97                 -moz-transform:scale(.222); 
 98                 -o-transform:scale(.222); 
 99                 transform:scale(.222); 
100                 opacity:1 
101             } 
102             50% { 
103                 -webkit-transform:scale(.622); 
104                 -ms-transform:scale(.622); 
105                 -moz-transform:scale(.622); 
106                 -o-transform:scale(.622); 
107                 transform:scale(.622); 
108                 opacity:.4 
109             } 
110             98% { 
111                 -webkit-transform:scale(1); 
112                 -ms-transform:scale(1); 
113                 -moz-transform:scale(1); 
114                 -o-transform:scale(1); 
115                 transform:scale(1); 
116                 opacity:.2 
117             } 
118             100% { 
119                 opacity:0 
120             } 
121         } 
122         @-o-keyframes c2 { 
123             0% { 
124                 -webkit-transform:scale(.222); 
125                 -ms-transform:scale(.222); 
126                 -moz-transform:scale(.222); 
127                 -o-transform:scale(.222); 
128                 transform:scale(.222); 
129                 opacity:1 
130             } 
131             50% { 
132                 -webkit-transform:scale(.622); 
133                 -ms-transform:scale(.622); 
134                 -moz-transform:scale(.622); 
135                 -o-transform:scale(.622); 
136                 transform:scale(.622); 
137                 opacity:.4 
138             } 
139             98% { 
140                 -webkit-transform:scale(1); 
141                 -ms-transform:scale(1); 
142                 -moz-transform:scale(1); 
143                 -o-transform:scale(1); 
144                 transform:scale(1); 
145                 opacity:.2 
146             } 
147             100% { 
148                 opacity:0 
149             } 
150         } 
151         @keyframes c2 { 
152             0% { 
153                 -webkit-transform:scale(.222); 
154                 -ms-transform:scale(.222); 
155                 -moz-transform:scale(.222); 
156                 -o-transform:scale(.222); 
157                 transform:scale(.222); 
158                 opacity:1 
159             } 
160             50% { 
161                 -webkit-transform:scale(.622); 
162                 -ms-transform:scale(.622); 
163                 -moz-transform:scale(.622); 
164                 -o-transform:scale(.622); 
165                 transform:scale(.622); 
166                 opacity:.4 
167             } 
168             98% { 
169                 -webkit-transform:scale(1); 
170                 -ms-transform:scale(1); 
171                 -moz-transform:scale(1); 
172                 -o-transform:scale(1); 
173                 transform:scale(1); 
174                 opacity:.2 
175             } 
176             100% { 
177                 opacity:0 
178             } 
179         } 
180     </style>

(三)第三种方法

  (1)HTML结构

1 <body> 
2 <div class="container"> 
3   <div class="dot"></div> 
4   <div class="wave"></div> 
5 </div> 
6 </body>

  (2)CSS样式

 1 <style type="text/css"> 
 2   .container{ 
 3     position: relative; 
 4     width: 100px; 
 5     height: 100px; 
 6     margin: 0 auto; 
 7   } 
 8   .dot{ 
 9     position: absolute; 
10     left: 15px; 
11     top:15px; 
12     width:6px; 
13     height: 6px; 
14     border-radius: 50%; 
15   } 
16   .wave{ 
17     position: absolute; 
18     left: 2px; 
19     top: 2px; 
20     width: 24px; 
21     height: 24px; 
22     border: 6px solid red; 
23     border-radius: 50%;  
24     opacity: 0; 
25     animation: waveCircle 3s ease-out; 
26     animation-iteration-count: infinite; 
27   } 
28   @-webkit-keyframes waveCircle { 
29     0%{ 
30       transform: scale(0); 
31       opacity: 0; 
32     } 
33     10%{ 
34       transform: scale(0.1); 
35       opacity: 0.1; 
36     } 
37     20%{ 
38       transform: scale(0.2); 
39       opacity: 0.2; 
40     } 
41     30%{ 
42       transform: scale(0.3); 
43       opacity: 0.3; 
44     } 
45     75%{ 
46       transform: scale(0.6); 
47       opacity: 0.5; 
48     } 
49     100%{ 
50       transform: scale(1); 
51       opacity: 0; 
52     } 
53   } 
54   </style>

(四)第四种方法

  (1)HTML结构

1 <body> 
2 <div class="example"> 
3   <div class="dot"></div> 
4 </div> 
5 </body>

  (2)CSS样式

 1 <style type="text/css"> 
 2    .example { 
 3     position:relative; 
 4     margin:150px auto; 
 5     width:50px; 
 6     height:50px; 
 7     } 
 8   .dot:before{ 
 9     content:' '; 
10     position: absolute; 
11     z-index:2; 
12     left:0; 
13     top:0; 
14     width:10px; 
15     height:10px;  
16     background-color: #ff4200; 
17     border-radius: 50%; 
18   } 
19   
20   .dot:after { 
21     content:' '; 
22     position: absolute; 
23     z-index:1; 
24     width:10px; 
25     height:10px;  
26     background-color: #ff4200; 
27     border-radius: 50%; 
28     box-shadow: 0 0 10px rgba(0,0,0,.3) inset; 
29     -webkit-animation: waveCircle 1s ease infinite normal ;
 1   
 2     /*-webkit-animation-name: ripple; 
 3     -webkit-animation-duration: 1s; 
 4     -webkit-animation-timing-function: ease;  
 5     -webkit-animation-delay: 0s; 
 6     -webkit-animation-iteration-count: infinite; 
 7     -webkit-animation-direction: normal;*/ 
 8   } 
 9   
10   @keyframes waveCircle { 
11      0% { 
12       left:5px; 
13       top:5px; 
14       width:0; 
15       height:0; 
16     } 
17     100% { 
18       left:-20px; 
19       top:-20px; 
20       opacity: 0; 
21       width:50px; 
22       height:50px; 
23     } 
24   } 
25     </style>


发布评论
IT序号网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

UI优秀框架(库)知识解答
你是第一个吃螃蟹的人
发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。