添加到百度首页
添加收藏 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. }
相关文章



大家都在看

最新更新