呼吸灯

利用盒子模型定宽定高的特性，改变父元素padding的大小，实现动画，制作了呼吸灯的动画效果。盒子类型必须是border-box

对最外层的盒子div设置定宽定高 box-sizing：border-box；对first，second设置边框圆角，宽度自动填充为100%。

此时两个圆会叠加在一起，这时对外层设置margin，也就是对out，first设置margin.

接着设置动态效果，当鼠标移入时最外层的padding改变30px-->10px,动画效果发生时间花了4s,当鼠标移入圆内时，padding的颜色发生改变

还可以利用animation动画来制作呼吸灯的动画效果，外圆扩大的同时内圆缩小，外圆缩小内圆扩大。当内圆缩小或者放大，外圆不发生改变。

对于两个圆进行动画效果的设置

外圆的动画轨迹25%的位置padding缩小到10px;50%回到正常的位置；此时内圆在25%的位置padding扩大，50%的时候padding缩小，但是此时外圆不发生改变。