多種雪花圖片，自由下落到底端漸變消失
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>
雪花圖片素材：
保存圖片方法：鼠標放到雪花上（不要點，點開雪花是白色的你不一定能找到），右鍵—圖片另存為