文字快闪
![文字快闪 文字快闪](./images/1536234060443.png)
文字快闪
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
- <title>Document</title>
- <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
- <style>
- * {
- margin: 0;
- padding: 0;
- font-family: 'Microsoft Yahei';
- }
- body {
- color: #fff;
- overflow: hidden;
- }
- #cont {
- font-size: 180px;
- text-align: center;
- line-height: 500px;
- position: absolute;
- }
- </style>
- </head>
- <body>
- <div id="cont"></div>
- <script>
- $(function () {
- function rm(num) {
- return Number.parseInt(Math.random() * num);
- }
- function color() {
- return 'rgb(' + rm(256) + ',' + rm(256) + ',' + rm(256) + ')';
- }
- var w = ($(window).width() + 200) / 2;
- var h = $(window).height() / 2;
- var cont = $('#cont');
- var totalTime = 0;
- $('#cont').css('width', $(window).width());
- $('body').css({background: color()});
- // 动画
- function myAnimate(text, time) {
- totalTime += time;
- setTimeout(function () {
- $('body').css({background: color()});
- cont.html(text)
- .css({
- //left: rm(w),
- //top: rm(h),
- //color:'rgb('+rm(256)+','+rm(256)+','+rm(256)+'),'
- fontSize: rm(200) + 100
- });
- }, totalTime);
- }
- var word = '前,方,高,能,不要眨眼,!,! !,! ! !,';
- word += '学,习,前端,已经,很,久,久久,久久久,久久久久久久,!!!,';
- word += '下,面,注意,了,下面,做,一,个,快闪,效果,快,闪,快,快快,快快快,';
- word = word.split(',');
- for (var i = 0; i < word.length; i++) {
- myAnimate(word[i], rm(200) + 300);
- }
- });
- </script>
- </body>
- </html>