• 文字快闪

     

    文字快闪
    文字快闪

     

    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> 
  • 相关阅读:
    超哥笔记--linux准备知识(1)
    爬虫系列---scrapy全栈数据爬取框架(Crawlspider)
    爬虫系列---scrapy post请求、框架组件和下载中间件+boss直聘爬取
    pymongo 一篇文章搞定
    一篇文章搞定mongodb
    python进阶(四) windows下虚拟环境使用
    java基础(四) -变量类型
    java基础(二) -对象和类
    java基础(一) -语法
    Linux常用命令大全
  • 原文地址：https://www.cnblogs.com/linyufeng/p/9600476.html
Copyright © 2020-2023  润新知