CSS3打造黑客帝国数字雨
26 Mar 2012</embed>
参考资料：
-webkit-animation:仍旧是一个复合属性，
-webkit-animation: name duration timing-function delay iteration_count direction;
包括以下几个属性
（1） -webkit-animation-name 这个属性的使用必须结合@-webkit-keyframes一起使用
eg: @-webkit-keyframes fontchange{
0%{font-size:10px;}
30%{font-size:15px;}
100%{font-siez:12px;}
}
百分比的意思就是duration的百分比，如果没有设置duration的话，则表示为无穷大
div{ -webkit-animation-name:fontchange;}
（2）-webkit-animation-duration 表示动画持续的时间
（3）-webkit-animation-timing-function 表示动画使用的时间曲线
| 【语法】： -webkit-animation-timing-function: ease | linear | ease-in | ease-out | ease-in-out |
（4）-webkit-animation-delay 表示开始动画之前的延时
【语法】 -webkit-animation-delay: delay_time;
（5）-webkit-animation-iteration-count 表示动画要重复几次
【语法】-webkit-animation-iteration-count: times_number;
（6） -webkit-animation-direction 表示动画的方向
| 【语法】-webkit-animation-direction: normal(默认) | alternate |
normal 方向始终向前
alternate 当重复次数为偶数时方向向前，奇数时方向相反
【另外】跟animation有关的其他属性
| （1）-webkit-animation-fill-mode : none (默认) | backwards | forwards | both 设置动画开始之前和结束之后的行为（测试结 |
果不是很清晰）
| （2）-webkit-animation-play-state: running（默认） | paused 设置动画的运行状态 |
综合案例：
@-webkit-keyframes fontbulger {
0% {
font-size: 10px;
}
30% {
font-size: 15px;
}
100% {
font-size: 12px;
}
}
#box {
-webkit-animation-name: fontbulger;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count:3;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: ease-out;
-webkit-animation-fill-mode: both;
-webkit-animation-delay: 2s;
}
02 <head>
03 <meta charset=“UTF-8″>
04 <title>Matrix</title>
05 <style>
06 body{font-family:Helvetica,Verdana,sans-serif;}
07 #matrix{margin: auto;width:430px;height:290px;overflow:hidden;background-color:#000;color: rgba(, 255, , .7);text-shadow:rgba(,255,,.8) 5px 5px 10px;position:relative;}
08 @-webkit-keyframes fade{% {opacity:1;}100% {opacity:;}}
09 @-webkit-keyframes fall{from{top:-250px;}to{top:300px;}}
10 #matrix div{position:absolute;top:0px;-webkit-transform-origin:%;-webkit-transform:rotate(90deg);-webkit-animation-name:fall,fade;-webkit-animation-iteration-count:infinite;-webkit-animation-direction:normal;-webkit-animation-timing-function:ease-out;}
11 #matrix span{color:rgb(,255,);text-shadow:rgb(,255,) 0px 0px 5px;}
12 .f1{font-size: 1.2em;}
13 .f2{font-size: .9em;}
14 .c1{color: rgba(, 255, , .5);}
15 .d1{-webkit-animation-duration: 4s;}
16 .d2{-webkit-animation-duration: 6s;}
17 .d3{-webkit-animation-duration: 8s;}
18 .d4{-webkit-animation-duration: 10s;}
19 </style>
20 </head>
21 <body>
22 <div id=“matrix”>
23 <div class=“d1 c1 “ style=“left:5px;”>100<span>01</span>11000101010101<span></span>11</div>
24 <div class=“f1 d1 “ style=“left:30px;”>1010101010101<span>110</span></div>
25 <div class=“d1 f2 c1 “ style=“left:60px;”>11<span>010</span>0101010101101</div>
26 <div class=“d2 f1″ style=“left:110px;”>11<span>0000010101</span>1110101010</div>
27 <div class=“d4 c3 “ style=“left:110px;”>110101<span>10</span>101010101<span>v</span>n</div>
28 <div class=“d2 c1″ style=“left:140px;”>111111111010011010100101<span>11</span>010101</div>
29 <div class=“d3 f2 c1″ style=“left:170px;”>01010101101<span>11</span>0101</div>
30 <div class=“d1 c1″ style=“left:185px;”>10101010101<span>000</span>0101<span>11</span>11010</div>
31 <div class=“d3 “ style=“left:200px;”>1111110011<span>10</span>101010</div>
32 <div class=“d4 f1″ style=“left:250px;”>00101<span>1</span>0101010</div>
33 <div class=“d2 “ style=“left:290px;”>1101010101<span>l</span>00000001010111</div>
34 <div class=“d3 f2″ style=“left:310px;”>011111111110101<span>01</span>011011100110</div>
35 <div class=“d1 f1″ style=“left:350px;”>1011101<span></span>111111111111101100<span></span>101</div>
36 <div class=“d4 c1″ style=“left:390px;”>101010101010101<span>01</span>01101</div>
37 <div class=“d2 “ style=“left:410px;”>01010101<span>01011</span>0110101</div>
38 <div class=“d1 c1 “ style=“left:430px;”>0001101<span>0101</span>100101<span>01</span>10101</div>
39 <div class=“d1 c1 “ style=“left:5px;”>100<span>01</span>11000101010101<span></span>11</div>
40 <div class=“f1 d1″ style=“left:30px;”>1010101010101<span>110</span></div>
41 <div class=“d1 f2 c1″ style=“left:60px;”>11<span>010</span>0101010101101</div>
42 <div class=“d2 f1″ style=“left:110px;”>11<span>0000010101</span>1110101010</div>
43 <div class=“d4 c3 “ style=“left:110px;”>101010<span>1010</span>10101011<span>v</span>n</div>
44 <div class=“d2 c1″ style=“left:140px;”>111111111010011010100101<span>11</span>010101</div>
45 <div class=“d3 f2 c1″ style=“left:170px;”>01010101101<span>11</span>0101</div>
46 <div class=“d1 c1″ style=“left:185px;”>10101010101<span>000</span>0101<span>11</span>11010</div>
47 <div class=“d3 “ style=“left:200px;”>1111110011<span>10</span>101010</div>
48 <div class=“d4 f1″ style=“left:250px;”>00101<span>1</span>0101010</div>
49 <div class=“d2 “ style=“left:290px;”>1101010101<span>l</span>00000001010111</div>
50 <div class=“d3 f2″ style=“left:310px;”>011111111110101<span>01</span>011011100110</div>
51 <div class=“d1 f1″ style=“left:350px;”>1011101<span></span>111111111111101100<span></span>101</div>
52 <div class=“d4 c1″ style=“left:390px;”>101010101010101<span>01</span>01101</div>
53 <div class=“d2 “ style=“left:410px;”>01010101<span>01011</span>0110101</div>
54 <div class=“d1 c1 “ style=“left:430px;”>0001101<span>0101</span>100101<span>01</span>10101</div>
55 </div>
56 </body>
57 </html>
转载请注明：于哲的博客 » CSS3打造黑客帝国数字雨