html黑客帝国页面
2017-04-03
前端
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Matrix - Ryan</title>
<style type="text/css" media="screen">
body{
font-family: Helvetica, Verdana, sans-serif;background:black;
}
@font-face {
font-family: Katakana;
src: url('MoonBeams-katakana_.TTF');
}
#matrix{
margin: 1em auto;
font-family: Katakana;
width: 90%;
overflow: hidden;
height:100%;
background: #000;
padding:0 auto;
margin:20px auto;
background-image: -webkit-gradient(linear, 0% 90%, 0% 100%, from(rgba(0, 255, 0, 0)), to(rgba(0, 255, 0, 0.1)));
background-image: -moz-gradient(linear, 0% 90%, 0% 100%, from(rgba(0, 255, 0, 0)), to(rgba(0, 255, 0, 0.1)));
background-image: -o-gradient(linear, 0% 90%, 0% 100%, from(rgba(0, 255, 0, 0)), to(rgba(0, 255, 0, 0.1)));
color: rgba(0, 255, 0, .7);
text-shadow: rgba(255, 255, 255, .8) 0px 0px 4px;
position: relative;
}
@-webkit-keyframes fade{
0% { opacity: 1; }
100% { opacity: 0; }
}
@-webkit-keyframes fall{
from {top: -250px;}
to {top: 300px;}
}
@-moz-keyframes fade{
0% { opacity: 1; }
100% { opacity: 0; }
}
@-moz-keyframes fall{
from {top: -250px;}
to {top: 300px;}
}
@-o-keyframes fade{
0% { opacity: 1; }
100% { opacity: 0; }
}
@-o-keyframes fall{
from {top: -250px;}
to {top: 300px;}
}
#matrix div{
/* writing-mode: tb-rl; - ughh. doesn't work */
position: absolute;
top: 0;
/* arrearance */
-webkit-transform-origin: 0%;
-webkit-transform: rotate(90deg);
/* animation */
-webkit-animation-name: fall, fade;
-webkit-animation-iteration-count: infinite; /* use 0 to infinite */
-webkit-animation-direction: normal; /* default is normal. use 'alternate' to reverse direction */
-webkit-animation-timing-function: ease-out;
/* arrearance */
-moz-transform-origin: 0%;
-moz-transform: rotate(90deg);
/* animation */
-moz-animation-name: fall, fade;
-moz-animation-iteration-count: infinite; /* use 0 to infinite */
-moz-animation-direction: normal; /* default is normal. use 'alternate' to reverse direction */
-moz-animation-timing-function: ease-out;
/* arrearance */
-o-transform-origin: 0%;
-o-transform: rotate(90deg);
/* animation */
-o-animation-name: fall, fade;
-o-animation-iteration-count: infinite; /* use 0 to infinite */
-o-animation-direction: normal; /* default is normal. use 'alternate' to reverse direction */
-o-animation-timing-function: ease-out;
}
#matrix span{
color: rgb(0, 255, 0);
text-shadow: rgb(255, 255, 255) 0px 0px 5px;
}
.f1{
font-size: 1.2em;
}
.f2{
font-size: .9em;
}
.f3{
font-size: 1.4em;
}
.f4{
font-size: .8em;
}
.f5{
font-size: .5em;
}
.c1{color: blue;}
.c2{color: red;}
.c3{color: green;}
.c4{color: yellow;}
.c5{color: cyan;}
.c6{color: purple;}
.c7{color: pink;}
.c8{color: lightgreen;}
.c9{color: grey;}
.c10{color: white;}
.c0{
color: rgba(0, 255, 0, .5);
}
.d1{
animation-duration: 2s;
-webkit-animation-duration: 2s;
-moz-animation-duration: 2s;
-o-animation-duration: 2s;
}
.d2{
animation-duration: 4s;
-webkit-animation-duration: 4s;
-moz-animation-duration: 4s;
-o-animation-duration: 4s;
}
.d3{
animation-duration: 6s;
-webkit-animation-duration: 6s;
-moz-animation-duration: 6s;
-o-animation-duration: 6s;
}
.d4{
animation-duration: 8s;
-webkit-animation-duration: 8s;
-moz-animation-duration: 8s;
-o-animation-duration: 8s;
}
.d5{
animation-duration: 10s;
-webkit-animation-duration: 10s;
-moz-animation-duration: 10s;
-o-animation-duration: 10s;
}
.e1{
animation-delay: 1s;
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
-o-animation-delay: 1s;
}
.e2{
animation-delay: 2s;
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
-o-animation-delay: 2s;
}
.e3{
animation-delay: 0;
-webkit-animation-delay: 0;
-moz-animation-delay: 0;
-o-animation-delay: 0;
}
</style>
</head>
<body>
<div id="matrix">
<?php
/****************
Ryan 2013
****************/
error_reporting(0);
function getString()
{
$chars = array('a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w',
'x','y','z','0','1','2','3','4','5','6','7','8','9','!','@','#','$','%','^','&','*',')','(','_',
'+','-','=','\','|','/','?','.',',',';',':','"',''','~','`');
$span = array(0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,1);
$len = mt_rand(10,80);
$length = count($chars)-1;
shuffle($chars);
$return = '';
for($i = 0; $i < $len; $i++)
{
$str = $chars[mt_rand(0,$length)];
$str = ($span[array_rand($span)] == 1) ? "<span>" . $str . "</span>" : $str;
$return .= $str;
}
return $return;
}
$f = array('f1','f2','f3','f4','f5');
$c = array('c1','c2','c3','c4','c5','c6','c7','c8','c9','c10');
$cc = array('c0');
$d = array('d1','d2','d3','d4','d5');
$e = array('e1','e2','e3','e3','e3','e3');
//三种间距
$s = array('8','10','12','14','16','20','24','25','30','33','36','40');
$m = array('10','12','15','17','24','25','30','31','37','41','45','50');
$b = array('12','15','18','21','24','30','36','37','45','50','54','60');
if($_GET['c']==1)
$c = $cc;
$left = $m;
if($_GET['l']==1)
$left = $s;
else if($_GET['l']==2)
$left = $b;
$begin = 5;
for($i = 0; $i < 200; $i++)
{
if($begin > 1200)
exit;
$ff = $f[array_rand($f)];
$cc = $c[array_rand($c)];
$dd = $d[array_rand($d)];
$ee = $e[array_rand($e)];
echo '<div class="' . $ff . " " . $cc . " " . $dd . " " . $ee . '" style="left:' . $begin . 'px;">';
echo getString();
echo '</div>';
$begin = $left[array_rand($left)] + $begin;
}
?>
</div>
</body>
</html>