css06-特效动画(圆的呼吸动画)

代码示例

学习内容

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;
}
--------------本文结束 感谢您的阅读--------------