超酷的CSS3列表动画特效在线生成工具 - liffect

日期：2012-11-9  来源：GBin1.com

在线调试  在线演示

还记得我们曾经介绍过的开源CSS3动画CSS文件animate.css吗？使用它能够帮助你快速的编码CSS3动画效果。当然，如果你不喜欢自己编写CSS3动画效果代码的话，今天我们将介绍的另外一个在线代码生成工具liffect肯定会成为你的最爱。

liffect是一个在线的列表动画生成工具，能够帮助你针对一个ul列表来生成动画效果，你可能会经常的看到如下的动画类型：

• fadeIn
• zoomIn
• zoomOut
• slideTop
• slideDown
• pageTop
• pageRight
• ...

所有的以上动画特效，都可以使用liffect轻松的生成。这个工具依赖jQuery和CSS3的动画来生成以上所有的特效。最重要的是能够根据你的特效选择自动生成HTML，CSS和javascript代码。而且提供了其它的选项来有效的控制动画，例如，延迟，CSS前缀等等。相信你能更加精细的控制动画的效果。

这里我们使用PageTop效果生成如下代码：

HTML

<ul data-liffect="pageTop">

    <li><img src="http://223.4.150.152/gb/networks/themes/img/logo_small.jpg" alt="Lion"></li>

    <li><img src="http://223.4.150.152/gb/networks/themes/img/logo_small.jpg" alt="Lion"></li>

    <li><img src="http://223.4.150.152/gb/networks/themes/img/logo_small.jpg" alt="Lion"></li>

    <li><img src="http://223.4.150.152/gb/networks/themes/img/logo_small.jpg" alt="Lion"></li>

    <li><img src="http://223.4.150.152/gb/networks/themes/img/logo_small.jpg" alt="Lion"></li>

</ul>

CSS

ul[data-liffect="pageTop"] li {

    opacity: 0;

    position: relative;

    -webkit-animation: pageTop 600ms ease both;

    -webkit-animation-play-state: paused;

    -webkit-transform-origin: 50% 0%;

    -moz-animation: pageTop 600ms ease both;

    -moz-animation-play-state: paused;

    -moz-transform-origin: 50% 0%;

    -o-animation: pageTop 600ms ease both;

    -o-animation-play-state: paused;

    -o-transform-origin: 50% 0%;

    animation: pageTop 600ms ease both;

    animation-play-state: paused;

    transform-origin: 50% 0%;

}



ul[data-liffect="pageTop"].play li {

    -webkit-animation-play-state: running;

    -moz-animation-play-state: running;

    -o-animation-play-state: running;

    animation-play-state: running;

    list-style: none;

    float: left;

    padding: 10px;

}



@-webkit-keyframes pageTop {

    0% { opacity: 0; -webkit-transform: perspective(400px) rotateX(90deg); }

    100% { opacity: 1; -webkit-transform: perspective(400px) rotateX(0deg); }

}



@-moz-keyframes pageTop {

    0% { opacity: 0; -moz-transform: perspective(400px) rotateX(90deg); }

    100% { opacity: 1; -moz-transform: perspective(400px) rotateX(0deg); }

}



@-o-keyframes pageTop {

    0% { opacity: 0; -o-transform: perspective(400px) rotateX(90deg); }

    100% { opacity: 1; -o-transform: perspective(400px) rotateX(0deg); }

}



@keyframes pageTop {

    0% { opacity: 0; transform: perspective(400px) rotateX(90deg); }

    100% { opacity: 1; transform: perspective(400px) rotateX(0deg); }

}

Javascript

$(document).ready(function () {

    $("ul[data-liffect] li").each(function (i) {

        $(this).attr("style", "-webkit-animation-delay:" + i * 300 + "ms;"

                + "-moz-animation-delay:" + i * 300 + "ms;"

                + "-o-animation-delay:" + i * 300 + "ms;"

                + "animation-delay:" + i * 300 + "ms;");

        if (i == $("ul[data-liffect] li").size() -1) {

            $("ul[data-liffect]").addClass("play")

        }

    });

});

是不是很轻松，相信如果你需要使用CSS3动画效果来实现特效的话，这个工具绝对能够让你事半功倍。希望大家喜欢！

来源：超酷的CSS3列表动画特效在线生成工具 - liffect