首页风格
门户
博客

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

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

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

在线演示

使用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实现的图片加载动画效果

喜欢我们的文章请您与朋友分享:

?ü?à

留言

友情提示: 本站博客不再支持访客留言,如果有问题或者留言,请发布到  GBtags.com

  1. 目前没有任何留言
今日推荐