原来 css 也能这么炫酷（二）

阅读数：1 2020 年 1 月 7 日 15:39

原来css也能这么炫酷（二）

有没有炫到呢？先贴完整的代码再讲解：

Html：
（温馨提示：左右 / 上下滑动可查看全部代码）

复制代码
<section class="container-fluid">
       <div id="HD-pictures">
           <div class="row pic-banner">
               <div class="col-md-6 col-md-offset-3 hidden-sm hidden-xs">
                   <div class="img-box">
                       <div class="img-mask"></div>
                   </div>
               </div>
           </div>
           <div class="pic-content">
               <span class="toLeft glyphicon glyphicon-chevron-left"></span>
               <span class="toRight glyphicon glyphicon-chevron-right"></span>
               <ul class="img-list clearfix">
                   <li>
                       <div class="ac-img"></div>
                       <img width="100%" src="images/section/img-list-1.jpg" alt=""/>
                   </li>
                   <li>
                       <img width="100%" src="images/section/img-list-2.jpg" alt=""/>
                   </li>
                   <li>
                       <img width="100%" src="images/section/img-list-3.jpg" alt=""/>
                   </li>
                   <li>
                       <img width="100%" src="images/section/img-list-4.jpg" alt=""/>
                   </li>
                   <li>
                       <img width="100%" src="images/section/img-list-5.jpg" alt=""/>
                   </li>
                   <li>
                       <img width="100%" src="images/section/img-list-6.jpg" alt=""/>
                   </li>
                   <li>
                       <img width="100%" src="images/section/img-list-7.jpg" alt=""/>
                   </li>
                   <li>
                       <img width="100%" src="images/section/img-list-8.jpg" alt=""/>
                   </li>
               </ul>
           </div>
       </div>
   </section>

Css：
（温馨提示：左右 / 上下滑动可查看全部代码）

复制代码
<style type="text/css">
   body {
     background: #333
   }
   ul {
     padding:0;
   }
   section #HD-pictures .pic-content {
     margin: 0 50px;
     overflow: hidden ;
     position: relative;
   }
   section #HD-pictures .pic-content .toLeft,
   section #HD-pictures .pic-content .toRight {
       position: absolute;
       top: 35%;
     z-index: 300;
     font-size: 50px;
     color: rgba(245, 234, 8, 0.2);
     cursor: pointer;
     transition: .3s;
   }
   section #HD-pictures .pic-content .toLeft {
       left: 0;
   }
   section #HD-pictures .pic-content .toRight {
       right: 0;
   }
   section #HD-pictures .pic-content .toLeft:hover,
   section #HD-pictures .pic-content .toRight:hover {
       color: rgba(235, 43, 4, 0.8);
   }
   section .img-list {
     margin: 0;
     position: relative;
     left: 0px;
     transition: .5s;
     cursor: pointer;
   }
   section .img-list > li {
       position: relative;
       float: left;
   }
   section .pic-banner > .hidden-sm {
       margin-top: 20px;
       margin-bottom: 20px;
       position: relative;
   }
   section .img-box {
       position: relative;
   }
   section .img-box > .obj {
      position: absolute;
   }
   section .img-mask {
       position: absolute;
       width: 100%;
       height: 100%;
       top: 0;
       left: 0;
       z-index: 100;
   }
 </style>

Js：
（温馨提示：左右 / 上下滑动可查看全部代码）

复制代码
$(function () {
     +function () {
         var ulList = $(".img-list");
         var acImg = $('.img-list .ac-img');
         var imgBox = $('.img-box');
         var moved = 0;// 位移数
         var movedAimg = 0;//activeIMG 的位移数
         var liWidth = parseFloat(layout()[0]);
         // 左右播图
         $('.pic-content>span').click(function () {
             var sizes = layout();
             liWidth = parseFloat(sizes);
             if ($(this).hasClass('toRight')) {
                 if (moved > -4) {
                     moved--;
                     ulList.css('left', moved * liWidth + 'px');
                 }
                 if (movedAimg < 7) {
                     movedAimg++;
                     acImg.css('left', movedAimg * liWidth + 'px');
                     splitShowImg(movedAimg);
                 }
                 //right
             } else {
                 //left
                 if (moved < 0) {
                     moved++;
                     ulList.css('left', moved * liWidth + 'px');
                 }
                 if (movedAimg > 0) {
                     movedAimg--;
                     acImg.css('left', movedAimg * liWidth + 'px');
                     splitShowImg(movedAimg);
                 }
             }
         });
 
         var k = 0;
         $('.img-list>li>div.ac-img').click(function (e) {
             e.stopPropagation();
             k = parseFloat($('.img-list>li>.ac-img').css('left')) / liWidth;
             k = parseInt(k, 10);
             movedAimg = k;
         });
         $('.img-list>li').click(function () {
             k = $('.img-list>li').index($(this));
             movedAimg = k;
             acImg.css('left', k * liWidth + 'px');
             splitShowImg(k);
         });
 
         var xCount = 10;// 水平分割数
         var yCount = 6;
         var animateBase = ['bounce', 'flash', 'pulse', 'rubberBand', 'shake',
             'swing', 'tada', 'wobble', 'jello', 'bounceIn', 'bounceInLeft',
             'bounceInRight', 'lightSpeedIn', 'flip', 'rollIn', 'bounceInUp'];
 
         function splitShowImg(movedAimg) {
             var frag = document.createDocumentFragment();
             var parentW = parseFloat(imgBox.parent().css('width')).toFixed(4);
             imgBox.css({
                 'width': parentW + 'px',
                 'height': (parentW * 9 / 16) + 'px'
             });
             var selfH = parseFloat(imgBox.css('height'));
             for (var m = 0; m < xCount; m++) {
                 for (var n = 0; n < yCount; n++) {
                     var no = parseInt(Math.random()*(animateBase.length), 10);
                     var div = $(`<div class="obj animated ${animateBase[no]}"></div>`);
                     div.css({
                         'width': (parentW / xCount).toFixed(0) + 'px',
                         'height': (parseFloat(imgBox.css('height')) / yCount).toFixed(0) + 'px'
                     });
                     var l = m * parseFloat(div.css('width')).toFixed(0);
                     var t = n * parseFloat(div.css('height')).toFixed(0);
                     var bannerImg = $('.img-list img').eq(movedAimg);
                     var url = bannerImg.attr('src');
                     div.css({
                         'top': t + 'px',
                         'left': l + 'px'
                     });
                     div.css({
                         'background': `url("${url}") no-repeat -${l}px -${t}px / ${parentW}px ${selfH}px`
                     });
                     $(frag).append(div[0]);
                 }
             }
             $('.img-box').append($(frag));
         }
 
         splitShowImg(movedAimg);
     }();
     // 布局
     function layout() {
         var boxW = parseFloat($(".pic-content").css('width'));
         var lis = $(".img-list>li");
         lis.css('width', boxW * 0.25 + 'px');
         var ulW = parseFloat(lis.eq(0).css('width')) * lis.length + 10 + 'px';
         $(".img-list").css('width', ulW);
         return lis.eq(0).css('width');
     }
});

大家看了代码是否觉得实现起来很简单呢，这个是一个精简版的，最初设计的是一个响应式的轮播，每个小方块都会按不同的屏幕宽度去排列，不过这不是重点，我们只需要关注 splitShowImg 这个函数，他接受一个 img，然后就可以分割这个 img 为我们指定数量的小方块，然后每个小方块以随机漂移的动画从分散状态组装为一个完整的大图。我们这里分为了 60 个小方块。

关键实现点：
（温馨提示：左右 / 上下滑动可查看全部代码）

复制代码
var animateBase = ['bounce', 'flash', 'pulse', 'rubberBand', 'shake',
             'swing', 'tada', 'wobble', 'jello', 'bounceIn', 'bounceInLeft',
             'bounceInRight', 'lightSpeedIn', 'flip', 'rollIn','bounceInUp'
   ];

这里我们定义一个‘动画库’，里面的每一个元素都是 animate 这个动画库提供的类名，然后我们生成一个 0 到数组长度的随机数
（温馨提示：左右 / 上下滑动可查看全部代码）

复制代码
var no = parseInt(Math.random()*(animateBase.length), 10);

接下来要生成一个小方块：
（温馨提示：左右 / 上下滑动可查看全部代码）

复制代码
var div = $(`<div class="obj animated ${animateBase[no]}"></div>`);
 div.css({
            'width': (fatherW / xCount).toFixed(0) + 'px',
         'height': (parseFloat(imgBox.css('height')) / yCount).toFixed(0) + 'px'
        });
 var l = m * parseFloat(div.css('width')).toFixed(0);
 var t = n * parseFloat(div.css('height')).toFixed(0);
 var bannerImg = $('.img-list img').eq(movedAimg);
 var url = bannerImg.attr('src');
 div.css({
             'top': t + 'px',
             'left': l + 'px'
        });
 div.css({
              'background': `url("${url}") no-repeat -${l}px -${t}px / ${fatherW}px ${selfH}px`
        });

这里就是重点所在了，我们根据展示大图区域的大小计算出每个小方块的尺寸，然后再利用绝对定位的偏移量结合自身尺寸做排列，这样就完成了小方块的布局，最后最关键的就是 background 了，我们这里用简写，规则如下：
background: img_url repeat position / size

复制代码
也就是 background-img、background-repeat、background-position、background-size

看到这里你是不是就很明白了呢？简单来说就是利用 background-position、background-size 和定位来实现，background-size 是关键点，它可以保证整个背景图片的大小和布局区域相同，这样就可以等比的赋予每一个小方块对应位置的背景图片，这是 css3 的新属性，详细请参考（如无法打开，请复制链接到浏览器） http://www.w3school.com.cn/css3/css3_background.asp

写了这么久的 css 是不是现在才发现，原来简单的背景图片和绝对定位也可以这样玩？

最后，虽然这种做法看着很炫，但是实际项目中我们却很少这样做，一方面是因为很多样式都是 css3 的新特性，浏览器兼容问题难以解决，更重要的一方面就是这样大量的操作 dom 带来的性能问题是十分严重的，我们只是切了 60 份已经很明显的感觉到切图时略微卡顿，要是再多，页面直接就崩溃了。

我想要表达的其实是很多特效只要我们有想法，肯大胆去创新，最普通的样式组合起来就有可能成为最炫酷的效果。

本转载自 Think 体验设计公众号。

原文链接： https://mp.weixin.qq.com/s/U9sFGG6ZWzh9E4kKUm41ZA

语言 & 开发文化 & 方法方法论

评论

发布