吉吉于

CSS3打造黑客帝国数字雨

</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;
}

文字变化
01 <!DOCTYPE html>
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打造黑客帝国数字雨