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

清疚 2022-01-06 07:11 305阅读 0赞

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

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

### [**在线演示 ** ][Link 1]    ###

使用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/][http_tympanus.net_codrops_2013_07_02_loading-effects-for-grid-items-with-css-animations]

via [极客标签][Link 1]

### 来源：[CSS3实现的图片加载动画效果][GBin1.com] ###

[GBin1.com]: http://www.gbin1.com/technology/css/20130716-css3-image-loading-effects/
[CSS3]: http://www.gbin1.com/technology/css/20130716-css3-image-loading-effects/title.jpg
[Link 1]: http://www.gbtags.com/gb/share/1512.htm
[http_tympanus.net_codrops_2013_07_02_loading-effects-for-grid-items-with-css-animations]: http://tympanus.net/codrops/2013/07/02/loading-effects-for-grid-items-with-css-animations/

发表评论取消回复

表情：

评论列表（有 0 条评论，305人围观）

还没有评论，来说两句吧...

相关阅读

相关 156.CSS波浪加载器动画效果

效果 (源码网盘地址在最后) ![6be2e9939061c980170d4a2da1ab4390.gif][] 最近开源了一个 Vue 组件，还不够完善，欢迎大家来一

超、凢脫俗/ 2023年01月21日 03:29/ 0 赞/ 207 阅读

相关 5分钟实现漂亮的CSS加载动画，纯CSS实现加载动画

目录 1 视频 2 知识点 2.1 CSS calc() 函数 2.2 CSS var() 函数 2.3 CSS3 box-shadow 属性 2.4 CSS3 b

素颜马尾好姑娘i/ 2022年12月31日 02:25/ 0 赞/ 253 阅读

相关 css加载动画大全

> `css加载动画大全` <!DOCTYPE html> <html lang="en" > <head> <meta charset=

小鱼儿/ 2022年10月29日 03:28/ 0 赞/ 200 阅读

相关 css加载中动画效果

[转载自大佬][Link 1] 效果一: ![在这里插入图片描述][88253320a6ab4a489d6b1317add231e5.png] html代码：

r囧r小猫/ 2022年09月07日 12:27/ 0 赞/ 218 阅读

相关 Android中的加载动画效果

> 在布局中加入一个ImageView控件，为其设置动画效果 -------------------- 淡入淡出 AnimationSet animatio

末蓝、/ 2022年08月18日 11:57/ 0 赞/ 229 阅读

相关 css实现加载动画

css实现加载动画 / Usage: <div class="sk-spinner sk-spinner-rotating-plane"></div> /

不念不忘少年蓝@/ 2022年06月01日 11:54/ 0 赞/ 322 阅读

相关 css3动画效果

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></t

刺骨的言语ヽ痛彻心扉/ 2022年05月27日 02:44/ 0 赞/ 317 阅读

相关用纯CSS实现加载中动画效果

HTML <div class="pswp__preloader__icn"> <div class="pswp__preloader__cut">

矫情吗；*/ 2022年03月31日 12:19/ 0 赞/ 574 阅读

相关 Css3动画切换效果

开发工具与关键技术：DW 作者：文泽钦撰写时间：2019年3月21日实在不知道写什么，就翻了老师给的一些css样式看看有什么好玩的，老师用伪类做了一个鼠标移入到d

浅浅的花香味﹌/ 2022年02月26日 13:56/ 0 赞/ 423 阅读

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

日期：2013-7-16 来源：[GBin1.com][] ![CSS3实现的图片加载动画效果][CSS3] [在线演示 ][Link 1] 使用C

清疚/ 2022年01月06日 07:11/ 0 赞/ 305 阅读