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

dreamweaver免费视频教程：

51RGB Dreamweaver板块

加讨论群390180913 入群即可参加周一至周五免费公开课并获得免费视频 绝对干货！

 

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

 

插件描述

鼠标经过左侧分类文字时，文字背景样式改变，并切换右侧相应图片，兼容ie6以上

使用步骤

     

1．        引用js

<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>

2．        引用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>

3．        引用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; }

}

 

代码压缩包下载地址：

http://www.51rgb.com/nbbs/thread-1691-1-1.html

 

光看文字怎么够 来看在线视频 手把手教你做网站！

Adobe官方讲师万晨曦指导 轻松幽默学习网站开发

Dreamweaver视频直达网址 ：51RGB Dreamweaver板块