超酷的CSS3列表動畫特效在線生成工具 - liffect

還記得我們曾經介紹過的開源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