Matrix Effect - jQuery Plugin

by adiioo7

HTML

<script src="http://yourjavascript.com/53636111162/jquery-matrix.js"></script>
<div id="matrix">
<span>把鱼放回河里</span>

<span>有一次，孔子和他的学生们经过一条河。</span>

<span>他们看到河上有几艘渔船正在捕鱼。因为学生</span>

<span>们都住在城市，没有机会看到渔夫捕鱼。于是大家都很兴</span>

<span>奋地停下来看着渔夫捕鱼。</span>

<span>学生们发现渔夫先把网子从河里拉起</span>

<span>从网子里抓出一部分的鱼，放到船上的桶子里</span>

<span>再把另一部分的鱼放回河里，让这些鱼自由地离去</span>

</div>

CSS

.matrix {
    margin: 1em auto;
    font-family: Katakana;
    width: 450px;
    height: 288px;
    overflow: hidden;
    background: #000;
    background-image: 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;
}
@keyframes fade {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@keyframes fall {
    from {
        top: -250px;
    }
    to {
        top: 300px;
    }
}

@-webkit-keyframes fade {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@-webkit-keyframes fall {
    from {
        top: -250px;
    }
    to {
        top: 300px;
    }
}
@-ms-keyframes fade {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@-ms-keyframes fall {
    from {
        top: -250px;
    }
    to {
        top: 300px;
    }
}
.matrix span {
    position: absolute;
    top: 0;
    
    -webkit-transform-origin: 0%;
    -webkit-transform: rotate(90deg);
    -webkit-animation-name: fall, fade;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-timing-function: ease-out;
    transform-origin: 0%;
    transform: rotate(90deg);
    animation-name: fall, fade;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-timing-function: ease-out;
    
    -ms-animation-name: fall, fade;
    -ms-animation-iteration-count: infinite;
    -ms-animation-direction: normal;
    -ms-animation-timing-function: ease-out;
    
    -moz-transform-origin: 0%;
    -moz-transform: rotate(90deg);
    -moz-animation-name: fall, fade;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: normal;
    -moz-animation-timing-function: ease-out;
    color: rgb(0, 255, 0);
    text-shadow: rgb(255, 255, 255) 0px 0px 5px;
    width: 100%;
}

JavaScript

jQuery(function($){
    $("#matrix").Matrix();
});