css3水波纹效果 

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Title</title>
  6     <style>
  7         body{
  8             background:gold;
  9         }
 10 
 11         .circle {
 12             position:absolute;
 13             left:0;
 14             top:0;
 15             width:90px;
 16             height:90px
 17 
 18         }
 19         .circle div {
 20             position:absolute;
 21             top:50%;
 22             left:50%;
 23             background:#fff;
 24             width:90px;
 25             height:90px;
 26             margin-left:-45px;
 27             margin-top:-45px;
 28             opacity:1;
 29             border-radius:90px;
 30             -webkit-animation-duration:1.2s;
 31             -webkit-animation-timing-function:linear;
 32             -webkit-animation-iteration-count:infinite;
 33             -ms-animation-duration:1.2s;
 34             -ms-animation-timing-function:linear;
 35             -ms-animation-iteration-count:infinite;
 36             -moz-animation-duration:1.2s;
 37             -moz-animation-timing-function:linear;
 38             -moz-animation-iteration-count:infinite;
 39             -o-animation-duration:1.2s;
 40             -o-animation-timing-function:linear;
 41             -o-animation-iteration-count:infinite;
 42             animation-duration:1.2s;
 43             animation-timing-function:linear;
 44             animation-iteration-count:infinite;
 45         }
 46         .circle div.c1 {
 47             width:20px;
 48             height:20px;
 49             margin-left:-10px;
 50             margin-top:-10px;
 51             opacity:1;
 52             border-radius:90px
 53         }
 54         .circle div.c2 {
 55             -webkit-animation-name:c2;
 56             -webkit-animation-delay:.6s;
 57             -ms-animation-name:c2;
 58             -ms-animation-delay:.6s;
 59             -moz-animation-name:c2;
 60             -moz-animation-delay:.6s;
 61             -o-animation-name:c2;
 62             -o-animation-delay:.6s;
 63             /*! animation-name:c2; *//*! animation-delay:.6s */
 64         }
 65         .circle div.c3 {
 66             -webkit-animation-name:c2;
 67             -webkit-animation-delay:1.2s;
 68             -ms-animation-name:c2;
 69             -ms-animation-delay:1.2s;
 70             -moz-animation-name:c2;
 71             -moz-animation-delay:1.2s;
 72             -o-animation-name:c2;
 73             -o-animation-delay:1.2s;
 74             /*! animation-name:c2; *//*! animation-delay:1.2s */
 75         }
 76         @-webkit-keyframes c2 {
 77             0% {
 78                 -webkit-transform:scale(.222);
 79                 -ms-transform:scale(.222);
 80                 -moz-transform:scale(.222);
 81                 -o-transform:scale(.222);
 82                 transform:scale(.222);
 83                 opacity:1
 84             }
 85             50% {
 86                 -webkit-transform:scale(.622);
 87                 -ms-transform:scale(.622);
 88                 -moz-transform:scale(.622);
 89                 -o-transform:scale(.622);
 90                 transform:scale(.622);
 91                 opacity:.4
 92             }
 93             98% {
 94                 -webkit-transform:scale(1);
 95                 -ms-transform:scale(1);
 96                 -moz-transform:scale(1);
 97                 -o-transform:scale(1);
 98                 transform:scale(1);
 99                 opacity:.2
100             }
101             100% {
102                 opacity:0
103             }
104         }
105         @-ms-keyframes c2 {
106             0% {
107                 -webkit-transform:scale(.222);
108                 -ms-transform:scale(.222);
109                 -moz-transform:scale(.222);
110                 -o-transform:scale(.222);
111                 transform:scale(.222);
112                 opacity:1
113             }
114             50% {
115                 -webkit-transform:scale(.622);
116                 -ms-transform:scale(.622);
117                 -moz-transform:scale(.622);
118                 -o-transform:scale(.622);
119                 transform:scale(.622);
120                 opacity:.4
121             }
122             98% {
123                 -webkit-transform:scale(1);
124                 -ms-transform:scale(1);
125                 -moz-transform:scale(1);
126                 -o-transform:scale(1);
127                 transform:scale(1);
128                 opacity:.2
129             }
130             100% {
131                 opacity:0
132             }
133         }
134         @-moz-keyframes c2 {
135             0% {
136                 -webkit-transform:scale(.222);
137                 -ms-transform:scale(.222);
138                 -moz-transform:scale(.222);
139                 -o-transform:scale(.222);
140                 transform:scale(.222);
141                 opacity:1
142             }
143             50% {
144                 -webkit-transform:scale(.622);
145                 -ms-transform:scale(.622);
146                 -moz-transform:scale(.622);
147                 -o-transform:scale(.622);
148                 transform:scale(.622);
149                 opacity:.4
150             }
151             98% {
152                 -webkit-transform:scale(1);
153                 -ms-transform:scale(1);
154                 -moz-transform:scale(1);
155                 -o-transform:scale(1);
156                 transform:scale(1);
157                 opacity:.2
158             }
159             100% {
160                 opacity:0
161             }
162         }
163         @-o-keyframes c2 {
164             0% {
165                 -webkit-transform:scale(.222);
166                 -ms-transform:scale(.222);
167                 -moz-transform:scale(.222);
168                 -o-transform:scale(.222);
169                 transform:scale(.222);
170                 opacity:1
171             }
172             50% {
173                 -webkit-transform:scale(.622);
174                 -ms-transform:scale(.622);
175                 -moz-transform:scale(.622);
176                 -o-transform:scale(.622);
177                 transform:scale(.622);
178                 opacity:.4
179             }
180             98% {
181                 -webkit-transform:scale(1);
182                 -ms-transform:scale(1);
183                 -moz-transform:scale(1);
184                 -o-transform:scale(1);
185                 transform:scale(1);
186                 opacity:.2
187             }
188             100% {
189                 opacity:0
190             }
191         }
192         @keyframes c2 {
193             0% {
194                 -webkit-transform:scale(.222);
195                 -ms-transform:scale(.222);
196                 -moz-transform:scale(.222);
197                 -o-transform:scale(.222);
198                 transform:scale(.222);
199                 opacity:1
200             }
201             50% {
202                 -webkit-transform:scale(.622);
203                 -ms-transform:scale(.622);
204                 -moz-transform:scale(.622);
205                 -o-transform:scale(.622);
206                 transform:scale(.622);
207                 opacity:.4
208             }
209             98% {
210                 -webkit-transform:scale(1);
211                 -ms-transform:scale(1);
212                 -moz-transform:scale(1);
213                 -o-transform:scale(1);
214                 transform:scale(1);
215                 opacity:.2
216             }
217             100% {
218                 opacity:0
219             }
220         }
221     </style>
222 </head>
223 <body>
224 <div class="circle">
225 
226     <div class="c1"></div>
227     <div class="c2"></div>
228     <div class="c3"></div>
229 </div>
230 </body>
231 </html>

 

posted @ 2017-03-20 15:38  安静、、、  阅读(5769)  评论(0)    收藏  举报