本文介绍了如何使用CSS的transition和animation两种方法来创建呼吸灯动态效果。首先阐述了呼吸灯的原理，然后分别展示了使用animation和transition的CSS代码，通过调整边框颜色实现渐变循环的效果。在实现过程中，提到了box-sizing属性的重要性，以及在animation中解决border-color无效问题的方法。
HTML+CSS实现呼吸灯效果
呼吸灯原理
呼吸灯抽象过来就像呼吸一样，实现的效果是一种渐变循环的，从明亮到微弱以此无限循环的一种效果。那么用HTML写出基本框架，CSS实现样式，效果。
呼吸灯主体部分
两种方法的HTML代码是一样的，先贴代码。代码讲解：container是总的容器用来包裹呼吸灯的外圆（outer），外圆又包裹呼吸灯的内圆(iner)。
HTML 代码：
<body>
<div class="container">
<div class="outer">
<div class="iner">
</div>
</div>
</div>
</body>
CSS样式：
要给container,outer,iner设置 box-sizing: border-box;
box-sizing默认是content-box,当我们设置呼吸灯的外圆的时候，呈现如下图；造成的原因是box-sizing:content-box,它的width与height是内容width与height，而外圆的border占据了左右，上下空间，外圆的height却还是100%,所以圆整体下移，且为椭圆。
解决方法就是设置bo
最低0.47元/天 解锁文章
2687
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
