css06-特效动画（圆的呼吸动画）

发表于 2023-07-07 分类于前端本文字数： 339 阅读时长 ≈ 1 分钟

CSS 圆的呼吸动画：通过 @keyframes 定义 box-shadow 外阴影由 0 渐变到 25px，配合 animation 实现光晕呼吸效果，简单易用，适合按钮/头像高亮。

1、呼吸效果是通过cs动画 @keyframes 做出动画的前后效果，示例代码只通过外阴影 box-shadow 的变化。

@keyframes light {
  from {
    box-shadow: 0 0 0px rgb(255, 254, 253);
  }
  to {
    box-shadow: 0 0 25px rgb(214, 126, 25);
  }
}

2、再动画 animation 实现，效果不够完美。

.light {
  animation: light 3s ease-in-out infinite alternate;
}

--------------本文结束感谢您的阅读--------------