html+css+js实现呼吸灯效果

html部分：
<div class="outer"> <div class="inner"> <div class="waimian"> <div class="limian"></div> </div> </div> <div class="text">HI !</div> </div>
css部分：

     * {
      box-sizing: border-box;
    }
    .outer {
      width: 300px;
      height: 500px;
      margin: auto;
      background-color: #000;
    }
    .inner {
      height: 300px;
      width: 300px;
      padding: 60px;
    }
    .waimian {
      height: 100%;
      border-radius: 50%;
      border: 3px solid #fff;
      padding: 30px;
    }
    .limian {
      height: 100%;
      border-radius: 50%;
      border: 10px solid #fff;
    }
    .text {
      width: 300px;
      height: 200px;
      color: #fff;
}  

3.js代码：

    var inner = document.querySelector(".inner");
    var waimian = inner.querySelector(".waimian");
    var limian = waimian.querySelector(".limian");
    console.log(inner, waimian, limian);
    var pad = 30;
    var inpad = 60;
    var flag = true;
    var flagsec = true;
    function padd() {
      if (flag == true && flagsec == true) {
        // inner.style.padding = pad + "px";
        waimian.style.padding = pad + "px";
        pad++;
        if (pad == 50) {
          flag = false;
        }
      } else if (flag == false && flagsec == true) {
        // inner.style.padding = pad + "px";
        waimian.style.padding = pad + "px";
        pad--;
        if (pad == 30) {
          flag = true;
          flagsec = false;
        }
      } else if (flag == true && flagsec == false) {
        waimian.style.padding = pad + "px";
        inner.style.padding = inpad + "px";
        inpad--;
        pad++;
        if (pad == 50) {
          flag = false;
          flagsec = false;
        }
      } else if (flag == false && flagsec == false) {
        waimian.style.padding = pad + "px";
        inner.style.padding = inpad + "px";
        inpad++;
        pad--;
        if (pad == 30) {
          flag = true;
          flagsec = true;
        }
      }
    }
    setInterval(function () {
      padd();
    }, 200);

4.思路：
布局的话：利用怪异盒子的特性；
先设定好父盒子的宽高；（正方形最好）
由于是边框盒子其width值便是content+padding+border;通过一个父盒子的padding值的增减,它的content的宽度便会相对的减与增。同时，将子盒子的高度设置为100%，即和父盒子一样高。所以当父盒子的padding值变化后，
它的content会发生改变，内部的子盒子（也是边框盒子）的width值与height同时发生了改变，便可以做呼吸灯的效果。
js：
var pad = 30;
var inpad = 60;
var flag = true;
var flagsec = true;
将css里边框盒子的padding值设为全局变量；
需要注意的是当外部的圈随着padding改变后，不仅自己的宽高会改变，同时会影响到内部盒子的边框。
所以改变外圈时，为了不影响到内部圈的变化，要给外圈的padding同时做相应的变化，你增我见，你减我增。
设置两个标记值，相当于开关（00，01，10，11）就可以写这个效果了
最后用定时器来安排呼吸灯动起来。
点我查看最后实现的效果