为网格布局图片打造的超炫 CSS 加载动画
今天,我想与大家分享一些专门为网格布局的图像制作的很酷的 CSS 加载动画效果。您可以把这些效果用在你的作品集,博客或任何你想要的网页中。设置很简单。我们使用了下面这些工具库来实现这个效果:
- Normalize.css 来替代传统的 CSS 复位;
- ZURB Foundation 创建具有响应式的网格;
- Masonry 创建一个动态的网格布局;
- imagesLoaded 检查是否已加载图像;
- Infinite Scroll 加载更多图片并追加到画廊。
现在,让我们来看看一些实际的代码,这应该是大家最想知道的!
HTML 代码
其实 HTML 代码都是很简单的,复杂和创意的部分在 CSS。代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <div class = "row" > <div class = "large-12 columns main" > <ul class = "small-block-grid-2 medium-block-grid-3 large-block-grid-3 masonry" > <li class = "masonry-item" ><a target= "_blank" href= "#" ><img src= "images/01.jpg" alt= "" /></a></li> <li class = "masonry-item" ><a target= "_blank" href= "#" ><img src= "images/02.jpg" alt= "" /></a></li> <li class = "masonry-item" ><a target= "_blank" href= "#" ><img src= "images/03.jpg" alt= "" /></a></li> <li class = "masonry-item" ><a target= "_blank" href= "#" ><img src= "images/04.jpg" alt= "" /></a></li> <li class = "masonry-item" ><a target= "_blank" href= "#/" ><img src= "images/05.jpg" alt= "" /></a></li> <li class = "masonry-item" ><a target= "_blank" href= "#" ><img src= "images/06.jpg" alt= "" /></a></li> <li class = "masonry-item" ><a target= "_blank" href= "#" ><img src= "images/07.jpg" alt= "" /></a></li> <li class = "masonry-item" ><a target= "_blank" href= "#" ><img src= "images/08.jpg" alt= "" /></a></li> <li class = "masonry-item" ><a target= "_blank" href= "#" ><img src= "images/09.jpg" alt= "" /></a></li> <li class = "masonry-item" ><a target= "_blank" href= "#" ><img src= "images/10.jpg" alt= "" /></a></li> <li class = "masonry-item" ><a target= "_blank" href= "#" ><img src= "images/11.jpg" alt= "" /></a></li> <li class = "masonry-item" ><a target= "_blank" href= "#" ><img src= "images/12.jpg" alt= "" /></a></li> <li class = "masonry-item" ><a target= "_blank" href= "#/" ><img src= "images/13.jpg" alt= "" /></a></li> <li class = "masonry-item" ><a target= "_blank" href= "#" ><img src= "images/14.jpg" alt= "" /></a></li> <li class = "masonry-item" ><a target= "_blank" href= "#" ><img src= "images/15.jpg" alt= "" /></a></li> </ul> <ul class = "pagination" > <li><a class = "next" href= "index-02.php" >Next Page</a></li> </ul> <div class = "loading" ></div> </div><!-- End .main --> </div><!-- End .row --> |
CSS 代码
CSS 部分主要是动画效果,我们以 tada 效果为例:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 | @keyframes tada { 0% { -webkit-transform: scale( 1 ); -moz-transform: scale( 1 ); -ms-transform: scale( 1 ); -o-transform: scale( 1 ); transform: scale( 1 ); } 10% , 20% { -webkit-transform: scale(. 8 ) rotate( -2 deg); -moz-transform: scale(. 8 ) rotate( -2 deg); -ms-transform: scale(. 8 ) rotate( -2 deg); -o-transform: scale(. 8 ) rotate( -2 deg); transform: scale(. 8 ) rotate( -2 deg); } 30% , 50% , 70% , 90% { -webkit-transform: scale( 1.04 ) rotate( 2 deg); -moz-transform: scale( 1.04 ) rotate( 2 deg); -ms-transform: scale( 1.04 ) rotate( 2 deg); -o-transform: scale( 1.04 ) rotate( 2 deg); transform: scale( 1.04 ) rotate( 2 deg); } 40% , 60% , 80% { -webkit-transform: scale( 1.04 ) rotate( -2 deg); -moz-transform: scale( 1.04 ) rotate( -2 deg); -ms-transform: scale( 1.04 ) rotate( -2 deg); -o-transform: scale( 1.04 ) rotate( -2 deg); transform: scale( 1.04 ) rotate( -2 deg); } 100% { -webkit-transform: scale( 1 ) rotate( 0 ); -moz-transform: scale( 1 ) rotate( 0 ); -ms-transform: scale( 1 ) rotate( 0 ); -o-transform: scale( 1 ) rotate( 0 ); transform: scale( 1 ) rotate( 0 ); } } .tada { -webkit-animation-name: tada; -moz-animation-name: tada; animation-name: tada; } |
jQuery
当图像被加载进来后,我们给图像添加上 CSS 效果,然后我们找到并显示该项目,最后会刷新 Masonry 布局。当用户滚动页面的时候,无限滚动插件将装载更多的图像并重复前面的步骤。代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 | jQuery(document) .ready( function ($) { // Replace "tada" with an effect from the "effects.css" file. var effect = 'animate tada' ; var masonry_selector = '.masonry' ; var masonry_item_selector = '.masonry-item' ; // Initialize Masonry. var $masonry = $(masonry_selector) .masonry({ itemSelector: masonry_item_selector }); // Find and hide the items. var $masonry_items = $masonry .find(masonry_item_selector) .hide(); // Wait for the images to load. $masonry .imagesLoaded() // An image has been loaded. .progress( function (instance, image) { // Add the effect. var $image = $(image.img) .addClass(effect); // Find and show the item. var $item = $image .parents(masonry_item_selector) .show(); // Lay out Masonry. $masonry .masonry(); }); // Load more items. $masonry .infinitescroll({ navSelector: '.pagination' , nextSelector: '.pagination .next' , itemSelector: masonry_item_selector, loading: { finishedMsg: 'No more pages to load.' , img: 'images/loader.gif' , msgText: 'Loading the next page.' , selector: '.loading' } }, function (items, data, url) { var $items = $(items) .hide() .imagesLoaded() .progress( function (instance, image) { var $image = $(image.img) .addClass(effect); var $item = $image .parents(masonry_item_selector) .addClass( 'infinite-scroll-item' ) .show(); $masonry .masonry( 'appended' , $item); }); }); }); |
您可能感兴趣的相关文章
作者:山边小溪
主站:yyyweb.com 记住啦:)
欢迎任何形式的转载,但请务必注明出处。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
2013-09-10 字体大宝库:设计师必备的漂亮免费英文字体
2013-09-10 Parallax.js – 自适应智能设备方向的视差效果插件
2012-09-10 45个纯 CSS 实现的精美边框效果【附在线演示和源码】【下篇】
2012-09-10 2012年最新75款免费的专业英文字体下载【下篇】