使用CSS3实现的不同图片加载动画效果，支持响应式，非常适合针对瀑布流布局图片动态加载特效进行增强！
实例效果图，点击图片查看 演示 案例或 下载 此教程：
HTML代码：
-
<ul class="grid effect-4" id="grid">
-
<li><a href="#"><img src="images/1.jpg"></a></li>
-
<li><a href="#"><img src="images/2.jpg"></a></li>
-
<li><a href="#"><img src="images/3.jpg"></a></li>
-
<li><a href="#"><img src="images/4.png"></a></li>
-
<!-- ... -->
-
</ul>
CSS3样式代码：
-
/* Effect 4: fall perspective */
-
.grid.effect-4 {
-
perspective: 1300px;
-
}
-
-
.grid.effect-4 li {
-
transform-style: preserve-3d;
-
}
-
-
.grid.effect-4 li.animate {
-
transform: translateZ(400px) translateY(300px) rotateX(-90deg);
-
animation: fallPerspective .8s ease-in-out forwards;
-
}
-
-
@keyframes fallPerspective {
-
100% { transform: translateZ(0px) translateY(0px) rotateX(0deg); opacity: 1; }
-
}
