超酷的CSS3列表动画特效在线生成工具 - liffect
jjfat 12年前
还记得我们曾经介绍过的开源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
是不是很轻松,相信如果你需要使用CSS3动画效果来实现特效的话,这个工具绝对能够让你事半功倍。希望大家喜欢!