利用边框盒子和动画做一个呼吸灯

利用边框盒子和动画做呼吸灯的步骤为：

1. 完成呼吸灯的静态模型
呼吸灯的静态模型就是用几个块标签嵌套，代码如下：
body中的代码：

	<div class="article">
        <div class="top">
            <div id="outer"><!--外圆-->
                <div id="inner"></div><!--内圆-->
            </div>
        </div>
        <div class="text">Hi!</div>
    </div>

css代码：

 	   *{
            box-sizing: border-box;/*将所有块级元素设置成边框盒子*/
        }
        div.article{
            width: 200px;
            height: 300px;
            background-color: black;
            margin: 0 auto;
        }
        div.top{
            width: 200px;
            height: 200px;
            padding: 20px;
        }
        div#outer{
            height: 100%;
            border:5px solid #ccc;
            border-radius: 50%;
            padding: 20px;
        }
        div#inner{
            height: 100%;
            border: 10px solid #ffff;
            border-radius: 50%;
        }
        div.text{
            color:#ffff;
            text-align: center;
        }

呼吸灯静态模型为：

2. 设置动画
要让呼吸灯动起来，其实就是利用边框盒子的特性(改变其内边距，盒子宽高不变，内容大小发生变化)，改变外圆父级的内边距使外圆发生变化，改变外圆的内边距使内圆发生变化。需要注意的是，外圆变化时其内容也会变化，即内圆也会变化，所以需要在外圆变化时给外圆设置一个内边距以阻止内圆的变化。下面是动画的代码：

   		@keyframes outer{       /* 设置给外圆的父级使外圆进行动画 */
            25%{
                padding: 10px;
            }
            50%{
                padding: 20px;
            }
            100%{
                padding: 20px;
            }
        }
        @keyframes inner{       /* 设置给外圆使内圆进行动画 */
            25%{
                padding: 30px;
            }
            50%{
                padding: 20px;
            }
            75%{
                padding: 32px;
            }
            100%{
                padding: 20px;
            }
        }

3. 应用动画
首先使外圆的动画，将以下代码添加到外圆的父级，即class为top的div的样式中：

animation-name: outer;                  /*应用动画*/
animation-duration: 5s;                 /*设置动画持续时间*/
animation-iteration-count: infinite;    /*使动画循环*/
animation-timing-function: linear;      /*使动画的速度曲线为线性增长*/

接下来使内圆的动画，将以下代码添加到外圆的样式中：

animation-name: inner;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: linear;

至此，呼吸灯已经完成了，效果图如下：