html5 css3飘雪代码 html雪花飘落效果代码

转载

jimoshalengzhou 2023-05-23 13:10:54

文章标签 雪花飘落 css html Math ci 文章分类 HTML5 移动开发

多种雪花图片，自由下落到底端渐变消失

html5 css3飘雪代码 html雪花飘落效果代码_雪花飘落

1 <!DOCTYPE html>
  2  
  3 <html style="background-color: black">
  4  
  5 <head>
  6  
  7     <meta charset="UTF-8">
  8  
  9     <title>雪花飘落</title>
 10  
 11     <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
 12  
 13     <style>
 14  
 15             html,body {width: 100%;}
 16  
 17             #leafContainer
 18  
 19             {
 20  
 21                 position: fixed;
 22  
 23                 z-index: 2;
 24  
 25                 width: 100%;
 26  
 27                 height: 100%;
 28  
 29                 top: 0;
 30  
 31                 overflow: hidden;
 32  
 33             }
 34  
 35  
 36             #leafContainer > div
 37  
 38             {
 39  
 40                 position: absolute;
 41  
 42                 max-width: 100px;
 43  
 44                 max-height: 100px;
 45  
 46                 -webkit-animation-iteration-count: infinite, infinite;
 47                 -webkit-animation-direction: normal, normal;
 48  
 49                 -webkit-animation-timing-function: linear, ease-in;
 50  
 51             }
 52  
 53  
 54             #leafContainer > div > img
 55  
 56             {
 57  
 58                 width: 100%;
 59  
 60                 -webkit-animation-iteration-count: infinite;
 61  
 62                 -webkit-animation-direction: alternate;
 63  
 64                 -webkit-animation-timing-function: ease-in-out;
 65  
 66                 -webkit-transform-origin: 50% -100%;
 67  
 68             }
 69  
 70             @-webkit-keyframes fade
 71  
 72             {
 73  
 74                 0%   {
 75  
 76                 opacity: 1;
 77  
 78             }
 79  
 80             95%
 81  
 82             {
 83  
 84                 opacity: 1;
 85  
 86             }
 87  
 88             100%
 89  
 90             {
 91  
 92                 opacity: 0;
 93  
 94             }
 95  
 96             }
 97  
 98             @-webkit-keyframes drop
 99  
100             {
101  
102                 0%   {
103  
104                 -webkit-transform: translate(0px, -50px);
105  
106             }
107  
108             100%
109  
110             {
111  
112                 -webkit-transform: translate(0px, 650px);
113  
114             }
115  
116             }
117  
118             @-webkit-keyframes clockwiseSpin
119  
120             {
121  
122                 0%   {
123  
124                 -webkit-transform: rotate(-50deg);
125  
126             }
127  
128             100%
129  
130             {
131  
132                 -webkit-transform: rotate(50deg);
133  
134             }
135  
136             }
137  
138             @-webkit-keyframes counterclockwiseSpinAndFlip
139  
140             {
141  
142                 0%   {
143  
144                 -webkit-transform: scale(-1, 1) rotate(50deg);
145  
146             }
147  
148             100%
149  
150             {
151  
152                 -webkit-transform: scale(-1, 1) rotate(-50deg);
153  
154             }
155  
156             }
157  
158         </style>
159  
160     <script>
161  
162  
163         const NUMBER_OF_LEAVES = 50;
164  
165  
166  
167     function init()
168  
169         {
170  
171             
172  
173             var container = document.getElementById('leafContainer');
174  
175            
176  
177             for (var i = 0; i < NUMBER_OF_LEAVES; i++) 
178  
179             {
180  
181                 container.appendChild(createALeaf());
182  
183             }
184  
185         }
186  
187  
188  
189         function randomInteger(low, high)
190  
191         {
192  
193             return low + Math.floor(Math.random() * (high - low));
194  
195         }
196  
197  
198  
199          
200  
201         function randomFloat(low, high)
202  
203         {
204  
205             return low + Math.random() * (high - low);
206  
207         }
208  
209  
210  
211          
212  
213         function pixelValue(value)
214  
215         {
216  
217             return value + 'px';
218  
219         }
220  
221          
222  
223         function durationValue(value)
224  
225         {
226  
227             return value + 's';
228  
229         }
230  
231          
232  
233         function createALeaf()
234  
235         {
236  
237     
238  
239     var leafDiv = document.createElement('div');
240  
241     var image = document.createElement('img');
242  
243     
244  
245  
246  
247     image.src ='snow' + randomInteger(1, 5) + '.png';
248  
249  
250  
251     leafDiv.style.top = "-10px";
252  
253  
254  
255  
256  
257     leafDiv.style.left = pixelValue(randomInteger(0, 1000));
258  
259     
260  
261    
262  
263     var spinAnimationName = (Math.random() < 0.5) ? 'clockwiseSpin' : 'counterclockwiseSpinAndFlip';
264  
265     
266  
267     
268  
269     leafDiv.style.webkitAnimationName = 'fade, drop';
270  
271     image.style.webkitAnimationName = spinAnimationName;
272  
273     
274  
275    
276  
277     var fadeAndDropDuration = durationValue(randomFloat(5, 11));
278  
279    
280  
281     var spinDuration = durationValue(randomFloat(4, 8));
282  
283      
284  
285     leafDiv.style.webkitAnimationDuration = fadeAndDropDuration + ', ' + fadeAndDropDuration;
286  
287  
288  
289     var leafDelay = durationValue(randomFloat(0, 5));
290  
291     leafDiv.style.webkitAnimationDelay = leafDelay + ', ' + leafDelay;
292  
293  
294  
295     image.style.webkitAnimationDuration = spinDuration;
296  
297  
298  
299     leafDiv.appendChild(image);
300  
301  
302  
303     return leafDiv;
304  
305     }
306  
307  
308  
309         window.addEventListener('load', init);
310  
311         </script></head>
312  
313 <body>
314  
315     <div id="leafContainer">
316  
317         </div>
318  
319 </body>
320  
321 </html>

雪花图片素材：

html5 css3飘雪代码 html雪花飘落效果代码_Math_02