菜鸟笔记

Menu

8种用CSS3实现的图片瀑布流动画加载效果

不得不说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>

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://tympanus.net/codrops/2013/07/02/loading-effects-for-grid-items-with-css-animations/

— 于 共写了261个字
— 文内使用到的标签:

8条回应:“8种用CSS3实现的图片瀑布流动画加载效果”

  1. 南寻说道:

    感觉第二张比较好看

  2. 楚狂人说道:

    会CSS的都是偶像

  3. 度十两说道:

    瀑布流适合做淘宝客

  4. 饭店装修www.ltcyzs.com说道:

    环保在线首选龙天
    http://www.longtianzs.com 办公室装修
    办公室装修设计www.ltbgzs.com
    美容院装修www.ltmryzs.com
    幼儿园装修www.ltxxzs.com
    别墅装修www.ltbszs.com
    店面装修www.ltdmzs.com
    饭店装修www.ltcyzs.com

发表评论

电子邮件地址不会被公开。 必填项已用*标注