文字快闪

 

文字快闪
文字快闪

 

  1. <!DOCTYPE html> 
  2. <html lang="en"> 
  3. <head> 
  4. <meta charset="UTF-8"> 
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  6. <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
  7. <title>Document</title> 
  8. <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> 
  9. <style> 
  10. * { 
  11. margin: 0; 
  12. padding: 0; 
  13. font-family: 'Microsoft Yahei'; 
  14. } 
  15.  
  16. body { 
  17. color: #fff; 
  18. overflow: hidden; 
  19. } 
  20.  
  21. #cont { 
  22. font-size: 180px; 
  23. text-align: center; 
  24. line-height: 500px; 
  25. position: absolute; 
  26. } 
  27. </style> 
  28. </head> 
  29. <body> 
  30. <div id="cont"></div> 
  31. <script> 
  32. $(function () { 
  33.  
  34. function rm(num) { 
  35. return Number.parseInt(Math.random() * num); 
  36. } 
  37.  
  38. function color() { 
  39. return 'rgb(' + rm(256) + ',' + rm(256) + ',' + rm(256) + ')'; 
  40. } 
  41.  
  42. var w = ($(window).width() + 200) / 2; 
  43. var h = $(window).height() / 2; 
  44. var cont = $('#cont'); 
  45. var totalTime = 0; 
  46.  
  47. $('#cont').css('width', $(window).width()); 
  48. $('body').css({background: color()}); 
  49.  
  50. // 动画 
  51. function myAnimate(text, time) { 
  52. totalTime += time; 
  53. setTimeout(function () { 
  54. $('body').css({background: color()}); 
  55. cont.html(text) 
  56. .css({ 
  57. //left: rm(w), 
  58. //top: rm(h), 
  59. //color:'rgb('+rm(256)+','+rm(256)+','+rm(256)+'),' 
  60. fontSize: rm(200) + 100 
  61. }); 
  62. }, totalTime); 
  63. } 
  64.  
  65. var word = '前,方,高,能,不要眨眼,!,! !,! ! !,'; 
  66. word += '学,习,前端,已经,很,久,久久,久久久,久久久久久久,!!!,'; 
  67. word += '下,面,注意,了,下面,做,一,个,快闪,效果,快,闪,快,快快,快快快,'; 
  68. word = word.split(','); 
  69. for (var i = 0; i < word.length; i++) { 
  70. myAnimate(word[i], rm(200) + 300); 
  71. } 
  72. }); 
  73. </script> 
  74. </body> 
  75. </html> 
posted @ 2018-09-06 19:43  林宇风  阅读(676)  评论(0)  编辑  收藏  举报