为网格布局图片打造的超炫 CSS 加载动画

今天,我想与大家分享一些专门为网格布局的图像制作的很酷的 CSS 加载动画效果。您可以把这些效果用在你的作品集,博客或任何你想要的网页中。设置很简单。我们使用了下面这些工具库来实现这个效果:

现在,让我们来看看一些实际的代码,这应该是大家最想知道的!

 

为网格布局图片打造的超炫 CSS 加载动画

效果演示      源码下载

 

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

未经允许不得转载:前端里 » 为网格布局图片打造的超炫 CSS 加载动画