龙盟编程博客 | 无障碍搜索 | 云盘搜索神器
快速搜索
主页 > web编程 > php编程 >

漂亮的Matrix矩阵文字坠落效果...

时间:2014-07-22 14:49来源: 作者: 点击: 次
分享到：
其实是前段时间看到的一个漂亮的CSS3效果,我直接拿过来用PHP改写了下,自动生成坠落文字等,一个文件而已,感觉很好看的样子..可调节大小颜色等等吧,记得用谷歌或者火狐等支持CSS3的浏
其实是前段时间看到的一个漂亮的CSS3效果,我直接拿过来用PHP改写了下,自动生成坠落文字等,一个文件而已,感觉很好看的样子..可调节大小颜色等等吧,记得用谷歌或者火狐等支持CSS3的浏览器查看,
第一次分享,轻调戏..
<!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: 80%;
				overflow: hidden;
				height:700px;
				background: #000;
				padding:0 auto;
				margin:10px 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;
}elseif($_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>

3. [代码][PHP]代码     跳至 [2] [3] [全屏预览] 

<!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: 80%;
				overflow: hidden;
				height:700px;
				background: #000;
				padding:0 auto;
				margin:10px 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;
}elseif($_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>
精彩图集
Sublime里直接运行PHP配置方法
Sublime里直接
Laravel 4 初级教程之视图、命名空间、路由
Laravel 4 初级
PHP仿博客园 个人博客（2） 数据库增添改删
PHP仿博客园
基于php中使用excel的简单介绍
基于php中使
将word转化为swf 如同百度文库般阅读实现思路及代码
将word转化为

热门标签

C++来实现 获取主板信息 友元函数重载 虚函数表 posix消息队列 优先队列 【源码】PHP 逗号分隔符 查找连 高级排序 re模块 复制插件 插入法 事务复 结束 java信号量 rollbac JoshChen 中的类组织开 viewstate sq 4 参数不同 获取文件内容 版本升级 红黑树 右端 后代元素 搜索结果 mysql存储过程游 linux基础与应用 缓冲区 声明 cscript.exe Incorrect 占据空间 表格排序 垃圾评论 整人脚本 onmousewheel 多用户 鼠标位置 SQL数据库 转型 变量概述 默认参数 消息 INSERT_INTO_ var_export Hide 动态参数 解密 session使用 cookie丢 phpmyadmin 相同后缀 删除数据库 扩展 CriticalSect locate

赞助商链接