今天，我想與大家分享一些專門為網格布局的圖像制作的很酷的 CSS 加載動畫效果。您可以把這些效果用在你的作品集，博客或任何你想要的網頁中。設置很簡單。我們使用了下面這些工具庫來實現這個效果：

• Normalize.css 來替代傳統的 CSS 復位；
• ZURB Foundation?創建具有響應式的網格；
• Masonry?創建一個動態的網格布局；
• imagesLoaded 檢查是否已加載圖像；
• Infinite Scroll?加載更多圖片并追加到畫廊。

　　現在，讓我們來看看一些實際的代碼，這應該是大家最想知道的！

?

?

效果演示? ? ??源碼下載

?

HTML 代碼

其實 HTML 代碼都是很簡單的，復雜和創意的部分在 CSS。代碼如下：

<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 效果為例：

@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(-2deg);-moz-transform: scale(.8) rotate(-2deg);-ms-transform: scale(.8) rotate(-2deg);-o-transform: scale(.8) rotate(-2deg);transform: scale(.8) rotate(-2deg);}30%,50%,70%,90%{-webkit-transform: scale(1.04) rotate(2deg);-moz-transform: scale(1.04) rotate(2deg);-ms-transform: scale(1.04) rotate(2deg);-o-transform: scale(1.04) rotate(2deg);transform: scale(1.04) rotate(2deg);}40%,60%,80%{-webkit-transform: scale(1.04) rotate(-2deg);-moz-transform: scale(1.04) rotate(-2deg);-ms-transform: scale(1.04) rotate(-2deg);-o-transform: scale(1.04) rotate(-2deg);transform: scale(1.04) rotate(-2deg);}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 布局。當用戶滾動頁面的時候，無限滾動插件將裝載更多的圖像并重復前面的步驟。代碼如下：

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);});});});

　　

您可能感興趣的相關文章

• Web 開發中很實用的10個效果【源碼下載】
• 精心挑選的優秀jQuery Ajax分頁插件和教程
• 12個讓人驚嘆的的創意的 404 錯誤頁面設計
• 讓網站動起來！12款優秀的 jQuery 動畫插件
• 十分驚艷的8個 HTML5 & JavaScript 特效

?

本文鏈接：為網格布局圖片打造的超炫 CSS 加載動畫效果

編譯來源：夢想天空 ◆ 關注前端開發技術 ◆ 分享網頁設計資源

轉載于:https://www.cnblogs.com/lhb25/p/css-loading-effects-grid-layout-images.html

總結

以上是生活随笔為你收集整理的为网格布局图片打造的超炫 CSS 加载动画的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。