目前写过最复杂的div弹出遮罩层结构

如果你只想了解div弹出遮罩层结构的实现原理，请直接访问文章“点击弹出div层页面不可操作”，如果想深入了解更复杂div弹出遮罩层结构请接着看下文。

如果你没有足够的时间，请直接关闭本文，一目十行是作为学习者的损失也是对作者的不尊重。何以用“最复杂的”来形容这个div弹出遮罩层结构呢？

如图所示，流程是在页面中点击签到弹出擦一擦和遮罩层，点击戒指显示签到成功，点击下面的“x”关闭弹出层和遮罩层。

客户的要求是：手指、擦一擦和星星都要动，星星要闪烁效果，当客户告诉我星星要闪烁效果时我是直接回绝了的，因为我觉得根本不可能实现。一开始我只写了个手指上下晃动的效果就把源码发给客户了，客户也只付了我一部分钱，奔着学习和拿剩下的钱的想法，我开始想如何实现客户想要的所有效果，本文就是对实现这一效果的经验总结。

html代码（关于代码是什么意思我已经在代码里详细注明，下面的jQuery代码同样）：

jQuery代码：

<script> 
    $(document).ready(function () {//点击签到弹出遮罩层和div层 
        $(".clickqd").click(function () { 
            $("#zzc").css("display", "block"); 
            $("#cyc").css("display", "block"); 
        }) 
        $(".smallsquare p:nth-child(1)").click(function () { 
            $(".smallsquare p:nth-child(2)").text('恭喜您获得5积分');//点击戒指变“点击钻石”为“恭喜您获得5积分” 
            $(".smallsquare p:nth-child(3) img").css("display", "none");//隐藏手指 
            $(this).css("display", "none");//隐藏戒指，为什么不用attr()来替换图片路径，因为两张图片的位置不一样 
            $(".smallsquare p:nth-child(4)").css("display", "block");//签到成功图片出现 
        }) 
        $(".close").click(function () { 
            $("#zzc").css("display", "none");//关闭遮罩层 
            $("#cyc").css("display", "none");//关闭弹出层 
        }) 
    }) 
</script> 

css代码太多就不贴了，下面有完整demo链接，我的代码结构并不是最优的，这点我知道，毕竟第一次写这样的，所以，不要@我说你还可以这么写，你这样写不科学之类的话，下面我会给你们看一个我认为写的最科学的div弹出遮罩层结构。

css代码里面最重要的就是定位，关于定位在这里我还是要说一下的，很多教程比如菜鸟教程对定位的解释是比较生硬的，很难理解，下面我制作了一张图来解释什么是定位。

A如果写样式position: fixed; top: 5px; right:5px; 那么A就是绝对定位。B如果写样式position: fixed; bottom: 5px; left:0; 那么B就是绝对定位。如果C写样式position: relative; D写样式position: absolute; left:10px; top:10px; 那么D相对于C定位，C为相对对象，D为相对主体，这样解释是不是大家就很容易明白了，只要明白了我的css代码就很容易理解了。position: static; 用来清除定位，媒体查询写响应式时经常会用到。

demo地址（移动页面）：https://blog.weiyiqi.net/lookdoc/xm3laofengxiang/qiandao.html（应客户要求页面部分已隐藏）

因为客户后来不要这个了，所以我只写了三个星星的动画，效果看起来并不是很好，如果星星比较多效果还是不错的。下面就来说星星闪烁效果是怎么实现的：

刚开始客户要星星闪烁效果我是懵逼的，因为我把星星闪烁理解成了视频，后来想想，星星闪烁无非就是忽大忽小、不同角度看到的效果不一样、每个星星闪烁的速度和频率都不一样，根据这三个特点我来“对症下药”：

1.忽大忽小：把星星做成一个png图片，放在一个div里，给div定位来固定星星的位置。可能会有人疑问为何不给图片直接定位，因为图片的宽高是不断变化的，div用来保证星星不管何时多大都位于中心点，否则写出来的效果看着很怪异。

这里要用到animatio和@keyframes。

2.不同角度看到的效果不一样：利用css3的旋转即transform: rotate();

3.每个星星闪烁的速度和频率都不一样:这个可以通过延迟动画执行animation-delay和增加动画运动时长来实现。

要使总体效果看起来自然，除了多写几个星星的动效，还要合理控制延迟执行的时间和动画运动的时长以及旋转的度数，这个需要一点一点去调整。

可能你觉得我的方法很麻烦，但是我是用纯css实现的。

当我把这一切做完让客户看时，客户说他们那边要调整，唉，单干赚钱就是这么不容易。最后改成了下面这样：

demo（移动页面）：https://blog.weiyiqi.net/lookdoc/xm3laofengxiang/qiandao2.html（应客户要求页面部分已隐藏）

如果上面的例子你觉得我写的代码不科学那么来看看这个：

html代码：

<!--遮罩层--> 
  <div class="zzc"></div> 
  <!--cycw为了保证里面三个div层都居中--> 
  <div class="cycw">  
    <!--擦一擦（第一个div层）--> 
    <div class="cycn"><img src="images/cyc2.png">  
      <!--两个点击按钮定位--> 
      <div class="zuanshi"></div> 
      <div class="cyctext"></div> 
    </div> 
    <!--签到成功2（第二个div层）--> 
    <div class="qdcg2"><img src="images/qdcg2.png">  
      <!--四个可变化元素定位--> 
      <div class="already">您已签到 <a>1</a> 天</div> 
      <div class="Continuity">连续签到 <a>7</a> 天</div> 
      <div class="get">即可获得 <a>5</a> 积分</div> 
      <div class="known"></div> 
    </div> 
    <!--签到成功1（第三个div层）--> 
    <div class="qdcg1"><img src="images/qdcg1.png">  
      <!--三个可变化元素定位--> 
      <div class="hd">连续七天签到获得</div> 
      <div class="fs">5</div> 
      <div class="determine"></div> 
    </div> 
  </div> 

每一个div都是必须存在的，有些按钮不再是切成图去做，而是一整张图，写div块去定位来实现精确点击，缩短了工期，我觉得这就是我在做了一个之后的进步。

总结一下经验：再难的页面拿到不要惧怕，切勿拿来上手就写，那样会做很多无用功，要先分析页面结构，想一下页面的每一个部分该怎么写，如果有没把握的，先百度，做下技术储备，这样的话脑子里面有大纲写起来就很快了，效率才是你赚更多钱的前提。