css3黑客代码效果

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 css3黑客代码效果的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>css3</title>
		
		<style type="text/css" media="screen">
		body{
			font-family: Helvetica, Verdana, sans-serif;
		}
		@font-face {
			font-family: Katakana;
			src: url('zt/MoonBeams-katakana_.TTF');
		}
		#matrix{
			margin: 1em auto;
			font-family: Katakana;
			width: 450px;
			height: 288px;
			overflow: hidden;
			background: #000;
			background-image: -webkit-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;}
		}


		#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;
		}
		#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;
		}
		.c1{
			color: rgba(0, 255, 0, .5);
		}
		.d1{
			-webkit-animation-duration: 4s;
		}
		.d2{
			-webkit-animation-duration: 6s;
		}
		.d3{
			-webkit-animation-duration: 8s;
		}
		.d4{
			-webkit-animation-duration: 10s;
		}
		.de{	
			-webkit-animation-delay: 3s;
		}
		
		</style>
		
	</head>
	<body>
		<h1></h1>
		
		<div id="matrix">	
			<div class="d1 c1 de" style="left:5px;">q8w<span>1</span>ertyuioklsdfgh<span>j</span>zxc</div>
			<div class="d3 f1" style="left:30px;">hgd4ldhbc9kpugccsr<span>q</span></div>
			<div class="d1 f2 c1" style="left:60px;">tr<span>z</span>ews0yfkldf4cvgbhj<span>n</span></div>
			<div class="d2 f1" style="left:80px;">sodhr49wh<span>u</span>yfbsrnlepjh</div>
			<div class="d4 c3 de" style="left:110px;">fue73<span>s</span>jf0tbkxpowf<span>v</span>n</div>
			<div class="d2 c1" style="left:140px;">sjdhfgueiwfgivecjowxkwpkpo<span>m</span>vcjoeuur</div>
			<div class="d3 f2 c1" style="left:170px;">tr<span>z</span>hfggh</div>
			<div class="d1 c1" style="left:185px;">thgp<span>m</span>srthdvytfv09876t<span>q</span>fgv</div>
			<div class="d3 de" style="left:200px;">dhiwgfdue<span>s</span>rjm</div>
			<div class="d4 f1" style="left:250px;">osadh<span>a</span>rshdyfeujm</div>
			<div class="d2 de" style="left:290px;">fwedjsdjh<span>l</span>gmrghftdercwewergjm</div>
			<div class="d3 f2" style="left:310px;">sodhr49wh<span>a</span>yfbsrnlepjh</div>
			<div class="d1 f1" style="left:350px;">p00oi<span>0</span>nf5sujhgdgbrjs36gdr<span>g</span>jpo</div>
			<div class="d4 c1" style="left:390px;">h68kgdetklbf<span>b</span>eswk</div>
			<div class="d2 de" style="left:410px;">dfrttvb<span>s</span>cfsr</div>
			<div class="d1 c1 de" style="left:430px;">sgfy<span>b</span>0hfrese<span>4</span>kc</div>
		</div>	
	</body>
</html>

附件:下载该文件资源,减少时间成本(增值服务)