[分享]css3实现呼吸灯效果

CSS3可以实现各种酷炫的效果，其中呼吸灯效果是很受欢迎的一种。下面我们来看看怎样实现呼吸灯效果。

/* CSS代码 */
.box {
  width: 100px;
  height: 50px;
  background-color: #f00;
  animation: breathing 2s ease-in-out infinite;
}

@keyframes breathing {
  0% { opacity: 0.2; }
  25% { opacity: 1; }
  75% { opacity: 1; }
  100% { opacity: 0.2; }
} 

首先创建一个盒子，设置宽度、高度和背景颜色。

.box {
  width: 100px;
  height: 50px;
  background-color: #f00;
} 

然后使用@keyframes规则创建一个名为breathing的动画，设置关键帧。

@keyframes breathing {
  0% { opacity: 0.2; }
  25% { opacity: 1; }
  75% { opacity: 1; }
  100% { opacity: 0.2; }
} 

关键帧设置了动画的开始、中间和结束状态，这里我们设置四个关键帧：

• 0%：透明度为0.2

• 25%：透明度为1，呼吸灯变亮

• 75%：透明度为1，持续一段时间

• 100%：透明度为0.2，呼吸灯变暗

最后将动画应用到盒子上，并设置动画的时间、缓动函数和循环次数。

.box {
  animation: breathing 2s ease-in-out infinite;
} 

其中，2s表示动画时长为2秒，ease-in-out表示缓动函数为先加速后减速，infinite表示循环次数为无限。

这样就完成了呼吸灯效果的实现。可以通过调整关键帧的参数和动画的时间、循环次数来实现不同的效果，比如缓慢的呼吸灯效果或者快速的闪烁效果。