樱花飞舞

 

樱花飞舞
樱花飞舞

思路

 

  1. 混合原型模式生成随机雪花: 颜色 大小 运动方式 位置(x,y)
  2. 雪花运动向下掉落, 当雪花超出屏幕, 在页面中随机生成一个新雪花
  1. <!DOCTYPE html> 
  2. <html lang="en"> 
  3. <head> 
  4. <meta charset="UTF-8"> 
  5. <title>Title</title> 
  6. <style> 
  7. *{margin: 0;padding: 0;} 
  8. .snow{ 
  9. position: absolute; 
  10. top: 0; 
  11. left: 0; 
  12. /*font-size: 80px; 
  13. color: pink; 
  14. animation: snow_rotateY 3s linear infinite;*/ 
  15. animation: 3s linear infinite; 
  16. } 
  17.  
  18. @keyframes snow_rotate { 
  19. from{ 
  20. transform: rotate(0deg); 
  21. } 
  22. to{ 
  23. transform: rotate(360deg); 
  24. } 
  25. } 
  26. @keyframes snow_rotateX { 
  27. from{ 
  28. transform: rotateX(0deg); 
  29. } 
  30. to{ 
  31. transform: rotateX(360deg); 
  32. } 
  33. } 
  34. @keyframes snow_rotateY { 
  35. from{ 
  36. transform: rotateY(0deg); 
  37. } 
  38. to{ 
  39. transform: rotateY(360deg); 
  40. } 
  41. } 
  42.  
  43. body{ 
  44. overflow: hidden; 
  45. } 
  46. </style> 
  47. </head> 
  48. <body> 
  49. <!--<div class="snow">❅</div>--> 
  50. <script> 
  51.  
  52. /** 
  53. * 雪花类 
  54. * @param color 颜色 
  55. * @param size 大小 
  56. * @param animateName 动画方式 
  57. * @param x left值 
  58. * @param y top值 
  59. * @constructor 
  60. */ 
  61.  
  62. // [0,255] 
  63. function randomNum(num){ 
  64. return parseInt(Math.random()*num); 
  65. } 
  66.  
  67. var animateNames = ['snow_rotate','snow_rotateX','snow_rotateY'];// 动画名称数组 
  68.  
  69. function Snow(){ 
  70. this.color = 'rgb(255,'+randomNum(256)+','+randomNum(256)+')'; 
  71. this.size = randomNum(60)+20; //[20, 80) 
  72. this.animateName = animateNames[randomNum(3)]; 
  73. this.x = randomNum(window.innerWidth); 
  74. this.y = randomNum(window.innerHeight/2); 
  75. } 
  76.  
  77. Snow.prototype.show = function () { 
  78. // 创建小雪花 
  79. var snow = document.createElement('div'); 
  80.  
  81. //设置雪花属性 
  82. snow.className = 'snow'; 
  83. snow.innerText = '✾';//☂ ☯ ✾ ❅ 🌹 
  84.  
  85. snow.style.color = this.color; 
  86. snow.style.fontSize = this.size + 'px'; 
  87. snow.style.animationName = this.animateName; 
  88. snow.style.left = this.x +'px'; 
  89. snow.style.top = this.y +'px'; 
  90.  
  91. //放入页面 
  92. document.body.appendChild(snow); 
  93. }; 
  94.  
  95.  
  96. //new Snow().show(); 
  97. for (var i = 0; i < 100; i++) { 
  98. new Snow().show(); 
  99. } 
  100.  
  101.  
  102. // 雪花下落 
  103. var snows = document.getElementsByClassName('snow'); 
  104. setInterval(function () { 
  105. for (var i = 0; i < 10; i++) { 
  106. var snow = snows[i]; 
  107. /*** 
  108. * 判断雪花是否超出屏幕, 
  109. * 如果超出删除雪花,生成一个新雪花 
  110. * */ 
  111. if(snow.offsetTop>window.innerHeight){ 
  112. document.body.removeChild(snow);//删除 
  113. new Snow().show();//添加 
  114. }else{ 
  115. snow.style.top = snow.offsetTop+1 +'px'; 
  116. } 
  117. } 
  118. },10); 
  119.  
  120. </script> 
  121.  
  122. </body> 
  123. </html> 
posted @ 2018-09-06 19:31  林宇风  阅读(263)  评论(0)  编辑  收藏  举报