- <!doctype html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>khaos-logo</title>
- <style>
- @import url(https://fonts.googleapis.com/CSS?family=Jura);
- body{
- font-family:'Jura';
- background:#fff;
- margin:0;
- padding:0;
- }
- section{
- height:100vh;
- width:100vw;
- }
- .content{
- position:relative;
- left:50%;
- top:50%;
- transform:translate(-50%, -50%);
- -webkit-transform:translate(-50%, -50%);
- }
- .logo{
- /*592667917@qq.com*/
- position:relative;
- left:50%;
- margin-top:10px;
- margin-left:-121px;
- background:transparent;
- }
- .desc{
- font-size:1em;
- color:#000;
- text-align:center;
- text-transform:uppercase;
- opacity:0;
- letter-spacing:-5px;
- animation: letterSpacing 1.5s ease-in-out 3.5s;
- -webkit-animation: letterSpacing 1.5s ease-in-out 3.5s;
- animation-fill-mode:forwards;
- -webkit-animation-fill-mode:forwards;
- }
- @keyframes letterSpacing{
- 0%{
- letter-spacing:-5px;
- opacity:0;
- }
- 100%{
- letter-spacing:1px;
- opacity:1;
- }
- }
- @-webkit-keyframes letterSpacing{
- 0%{
- letter-spacing:-5px;
- opacity:0;
- }
- 100%{
- letter-spacing:1px;
- opacity:1;
- }
- }
- </style>
- </head>
- <body>
- <section>
- <div class="content">
- <canvas height="52px" width="242px" class="logo"></canvas>
- <div class="desc">Pixel logo "drawing" animation,<br>made with canvas and jQuery.</div>
- </div>
- </section>
- <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
- <script>
- $test = setInterval(function(){ drawKhaos(2, 2); }, 50);
- $x = 1;
- $rgb = 0;
- $opacity = 1;
- var ctx = $('.logo')[0].getContext("2d");
- function drawKhaos($startCoordX, $startCoordY){
- ctx.beginPath();
- switch($x){
- case 1:
- ctx.rect($startCoordX, $startCoordY, 8, 8);
- break;
- case 2:
- ctx.rect($startCoordX, $startCoordY+10, 8, 8);
- break;
- case 3:
- ctx.rect($startCoordX, $startCoordY+20, 8, 8);
- break;
- case 4:
- ctx.rect($startCoordX, $startCoordY+30, 8, 8);
- break;
- case 5:
- ctx.rect($startCoordX, $startCoordY, 8, 8);
- break;
- case 6:
- ctx.rect($startCoordX, $startCoordY+40, 8, 8);
- break;
- case 7:
- ctx.rect($startCoordX+30, $startCoordY, 8, 8);
- break;
- case 8:
- ctx.rect($startCoordX+20, $startCoordY+10, 8, 8);
- break;
- case 9:
- ctx.rect($startCoordX+10, $startCoordY+20, 8, 8);
- break;
- case 10:
- ctx.rect($startCoordX+20, $startCoordY+30, 8, 8);
- break;
- case 11:
- ctx.rect($startCoordX+30, $startCoordY+40, 8, 8);
- break;
- case 12:
- ctx.rect($startCoordX+30, $startCoordY, 8, 8);
- break;
- /* end k */
- case 13:
- ctx.rect($startCoordX+50, $startCoordY, 8, 8);
- break;
- case 14:
- ctx.rect($startCoordX+50, $startCoordY+10, 8, 8);
- break;
- case 15:
- ctx.rect($startCoordX+50, $startCoordY+20, 8, 8);
- break;
- case 16:
- ctx.rect($startCoordX+50, $startCoordY+30, 8, 8);
- break;
- case 17:
- ctx.rect($startCoordX+50, $startCoordY+40, 8, 8);
- break;
- case 18:
- ctx.rect($startCoordX+60, $startCoordY+20, 8, 8);
- break;
- case 19:
- ctx.rect($startCoordX+70, $startCoordY+20, 8, 8);
- break;
- case 20:
- ctx.rect($startCoordX+80, $startCoordY, 8, 8);
- break;
- case 21:
- ctx.rect($startCoordX+80, $startCoordY+10, 8, 8);
- break;
- case 22:
- ctx.rect($startCoordX+80, $startCoordY+20, 8, 8);
- break;
- case 23:
- ctx.rect($startCoordX+80, $startCoordY+30, 8, 8);
- break;
- case 24:
- ctx.rect($startCoordX+80, $startCoordY+40, 8, 8);
- break;
- /* end h592667917@qq.com */
- case 25:
- ctx.rect($startCoordX+100, $startCoordY+40, 8, 8);
- break;
- case 26:
- ctx.rect($startCoordX+100, $startCoordY+30, 8, 8);
- break;
- case 27:
- ctx.rect($startCoordX+100, $startCoordY+20, 8, 8);
- break;
- case 28:
- ctx.rect($startCoordX+100, $startCoordY+10, 8, 8);
- break;
- case 29:
- ctx.rect($startCoordX+110, $startCoordY, 8, 8);
- break;
- case 30:
- ctx.rect($startCoordX+120, $startCoordY, 8, 8);
- break;
- case 31:
- ctx.rect($startCoordX+130, $startCoordY+10, 8, 8);
- break;
- case 32:
- ctx.rect($startCoordX+130, $startCoordY+20, 8, 8);
- break;
- case 33:
- ctx.rect($startCoordX+130, $startCoordY+30, 8, 8);
- break;
- case 34:
- ctx.rect($startCoordX+130, $startCoordY+40, 8, 8);
- break;
- case 35:
- ctx.rect($startCoordX+130, $startCoordY+40, 8, 8);
- break;
- case 36:
- ctx.rect($startCoordX+110, $startCoordY+20, 8, 8);
- break;
- case 37:
- ctx.rect($startCoordX+120, $startCoordY+20, 8, 8);
- break;
- /* 592667917@qq.com a */
- case 38:
- ctx.rect($startCoordX+150, $startCoordY+10, 8, 8);
- break;
- case 39:
- ctx.rect($startCoordX+150, $startCoordY+20, 8, 8);
- break;
- case 40:
- ctx.rect($startCoordX+150, $startCoordY+30, 8, 8);
- break;
- case 41:
- ctx.rect($startCoordX+160, $startCoordY+40, 8, 8);
- break;
- case 42:
- ctx.rect($startCoordX+170, $startCoordY+40, 8, 8);
- break;
- case 43:
- ctx.rect($startCoordX+180, $startCoordY+30, 8, 8);
- break;
- case 44:
- ctx.rect($startCoordX+180, $startCoordY+20, 8, 8);
- break;
- case 45:
- ctx.rect($startCoordX+180, $startCoordY+10, 8, 8);
- break;
- case 46:
- ctx.rect($startCoordX+170, $startCoordY, 8, 8);
- break;
- case 47:
- ctx.rect($startCoordX+160, $startCoordY, 8, 8);
- break;
- /* end o */
- case 48:
- ctx.rect($startCoordX+200, $startCoordY+40, 8, 8);
- break;
- case 49:
- ctx.rect($startCoordX+210, $startCoordY+40, 8, 8);
- break;
- case 50:
- ctx.rect($startCoordX+220, $startCoordY+40, 8, 8);
- break;
- case 51:
- ctx.rect($startCoordX+230, $startCoordY+30, 8, 8);
- break;
- case 52:
- ctx.rect($startCoordX+220, $startCoordY+20, 8, 8);
- break;
- case 53:
- ctx.rect($startCoordX+210, $startCoordY+20, 8, 8);
- break;
- case 54:
- ctx.rect($startCoordX+200, $startCoordY+10, 8, 8);
- break;
- case 55:
- ctx.rect($startCoordX+210, $startCoordY, 8, 8);
- break;
- case 56:
- ctx.rect($startCoordX+220, $startCoordY, 8, 8);
- break;
- case 57:
- ctx.rect($startCoordX+230, $startCoordY, 8, 8);
- break;
- }
- ctx.closePath();
- ctx.fillStyle = 'rgba('+$rgb+','+$rgb+','+$rgb+','+$opacity+')';
- $opacity /= 1.05;
- ctx.fill();
- $x++;
- if ($x> 57){
- clearInterval($test);
- }
- }
- </script>
- </body>
- </html>
来源: http://www.qdfuns.com/article/16120/bd7491be5e622afd7f35a3386634f9cc.html