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

发表于 分类于 ， 本文字数： 350 阅读时长 ≈ 1 分钟

代码示例

学习内容

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

1
2
3
4
5
6
7
8
@keyframes light {
  from {
    box-shadow: 0 0 0px rgb(255, 254, 253);
  }
  to {
    box-shadow: 0 0 25px rgb(214, 126, 25);
  }
}

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

1
2
3
.light {
  animation: light 3s ease-in-out infinite alternate;
}
--------------本文结束 感谢您的阅读--------------