添加到百度首頁
添加收藏 RSS 網站地圖 舊版網站
  • 全部
  • 網頁特效
  • 建站教程
  • 設計分享
當前位置:首頁 > 建站教程 > HTML5+CSS3 >

CSS3瀑布流動畫網頁特效制作

時間:2013-10-30      來源:互聯網     

使用CSS3實現的不同圖片加載動畫效果,支持響應式,非常適合針對瀑布流布局圖片動態加載特效進行增強!

實例效果圖,點擊圖片查看 演示 案例或 下載 此教程:

CSS3瀑布流動畫網頁特效制作


HTML代碼:
  1. <ul class="grid effect-4" id="grid">
  2. <li><a href="#"><img src="images/1.jpg"></a></li>
  3. <li><a href="#"><img src="images/2.jpg"></a></li>
  4. <li><a href="#"><img src="images/3.jpg"></a></li>
  5. <li><a href="#"><img src="images/4.png"></a></li>
  6. <!-- ... -->
  7. </ul>

 

CSS3樣式代碼:
  1. /* Effect 4: fall perspective */
  2. .grid.effect-4 {
  3. perspective: 1300px;
  4. }
  5.  
  6. .grid.effect-4 li {
  7. transform-style: preserve-3d;
  8. }
  9.  
  10. .grid.effect-4 li.animate {
  11. transform: translateZ(400px) translateY(300px) rotateX(-90deg);
  12. animation: fallPerspective .8s ease-in-out forwards;
  13. }
  14.  
  15. @keyframes fallPerspective {
  16. 100% { transform: translateZ(0px) translateY(0px) rotateX(0deg); opacity: 1; }
  17. }
相關文章
web前端視頻教程


大家都在看

最新更新

web前端視頻教程
中国竞彩网上怎么投注