CSS3实现的图片加载动画效果

时间: 2013-12-6 分类: CSS 作者: SAI

TAGS:

095219idaj1odi7odvnha8
使用CSS3实现的不同图片加载动画效果,支持响应式,非常适合针对瀑布流布局图片动态加载特效进行增强!
HTML
<ul id=”grid”>
    <li><a href=”http://drbl.in/fWMM”><img src=”images/1.jpg”></a></li>
    <li><a href=”http://drbl.in/fWPV”><img src=”images/2.jpg”></a></li>
    <li><a href=”http://drbl.in/fWMT”><img src=”images/3.jpg”></a></li>
    <li><a href=”http://drbl.in/fQdt”><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; }
    }
Javin

本文作者: SAI

推崇以用户为中心的设计理念,专注于用户体验设计,游走在视觉设计与前端开发之间。我要投稿

除非特殊注明,本文版权归原作者所有,欢迎转载!转载请注明版权以及本文地址,谢谢。
转载保留版权:塞纳» 前端技术 » CSS » CSS3实现的图片加载动画效果
本文地址:http://www.saiody.com/?p=950

返回顶部