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

为什么80%的码农都做不了架构师？>>>   

日期：2013-7-16  来源：GBin1.com

在线演示 

    使用CSS3实现的不同图片加载动画效果，支持响应式，非常适合针对瀑布流布局图片动态加载特效进行增强！

HTML

<ul class="grid effect-4" 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; }
    }

来源网站：http://tympanus.net/codrops/2013/07/02/loading-effects-for-grid-items-with-css-animations/

via 极客标签

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

转载于:https://my.oschina.net/gbin1/blog/145037