"Matrix"Animation with CSS3 on WebKit

Cara Pembuatan nya sebagai berikut:

1. Login
2. Setelah masuk pada halaman dasbor pilih rancangan
3. Klik edit Html
4. Centang expad widget dan cari kode ]]></b:skin>agar pencarian kode lebih cepat tekan Ctrl+F atau F3
5. Salin Kode Css di bawah ini dan letakkan di atas kode yang anda cari tadi

<style type="text/css" media="screen"> body{ font-family: Helvetica, Verdana, sans-serif; } @font-face { font-family: Katakana; src: url('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>

Markah Html

<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>

q8w1ertyuioklsdfghjzxc

hgd4ldhbc9kpugccsrq

trzews0yfkldf4cvgbhjn

sodhr49whuyfbsrnlepjh

fue73sjf0tbkxpowfvn

sjdhfgueiwfgivecjowxkwpkpomvcjoeuur

trzhfggh

thgpmsrthdvytfv09876tqfgv

dhiwgfduesrjm

osadharshdyfeujm

fwedjsdjhlgmrghftdercwewergjm

sodhr49whayfbsrnlepjh

p00oi0nf5sujhgdgbrjs36gdrgjpo

h68kgdetklbfbeswk

dfrttvbscfsr

sgfyb0hfrese4kc

Selamat Mencoba

credit: girliemac