jquery一款css3制作的图片动画特效代码

使用方法

HTML代码：

            <div data-code=true>
                <div class="test">
                    <div class="test one"></div>
                    <div class="test two"></div>
                    <div class="test three"></div>

                    <div class="test one"></div>
                    <div class="test two"></div>
                    <div class="test three"></div>

                    <div class="test one"></div>
                    <div class="test two"></div>
                    <div class="test three"></div>

                    <div class="test one"></div>
                    <div class="test two"></div>
                    <div class="test three"></div>
                </div>
            </div>

jquery脚本代码：

            $.fn.test = function() {

            var cH = $(window).height();
            var cW = $(window).width();

            return this.each(function() {
            var el = $(this);

            var w = 10 + (5 * Math.floor((Math.random() * 15)));
            var h = 10 + (5 * Math.floor((Math.random() * 15)));
            var t = 10 + (Math.floor(Math.random() * (cH-h)));
            var l = 10 + (Math.floor(Math.random() * (cW-w)));
            var r = Math.floor(Math.random() * 360);
            var duration = 1000 + Math.floor((Math.random() * 5000));

            //here is the CSSAnimate :-)
            el.CSSAnimate({
            y: t,
            x: l,
            width: w,
            height: h,
            skew: r/3,
            "border-radius": Math.floor(Math.random() * el.width()),
            "rotate": r,
            "transform-origin": Math.floor(Math.random() * 100)+"% "+Math.floor(Math.random() * 100)+"%",
            "background-color": "rgba("+Math.floor(Math.random() * 255)+","+Math.floor(Math.random() * 255)+","+Math.floor(Math.random() * 255)+","+(.6+Math.random()*.4)+")"
            }, duration, 0, "linear", function() {
            el.test();
            })
            })
            };


            $(".test").test();