图片加载显示效果(8种效果)

查看演示立即下载

插件描述：现在很多网站用到的图片加载时淡出效果，它是怎么实现的？下面我们用Loading Effects for Grid Items来实现这个效果。

现在很多网站用到的图片加载时淡出效果，它是怎么实现的？下面我们用Loading Effects for Grid Items来实现这个效果。

使用步骤

引用

 <script src="js/masonry.pkgd.min.js"></script>
<script src="js/imagesloaded.js"></script>
<script src="js/classie.js"></script>
<script src="js/AnimOnScroll.js"></script>

html

 <ul class="grid effect-4" id="grid">
    <li><a href="/"><img src="images/1.jpg"></a></li>
    <li><a href="/"><img src="images/2.jpg"></a></li>
    <li><a href="/"><img src="images/3.jpg"></a></li>
    <li><a href="/"><img src="images/4.png"></a></li>
    <!-- ... -->
</ul>

css

 /* 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; }
}

特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com

上一个特效：互动粒子幻灯片
下一个特效： CSS 3D动画翻书