pt电子游戏押注方法
添加到百度首頁
添加收藏 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前端視頻教程
pt电子游戏押注方法 财神捕鱼app 足球比分手机 棋牌注册送38大礼包 百人龙虎 大赢家90足球即时比分 新时时历史360 时时彩开奖视频 幸运快3大小单双技巧 重庆时时彩计划软件 快三大小单双的规律 新会员送88彩金 彩99苹果手机官网下载