使用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; }
-
}
