【动画消消乐｜CSS】086.炫酷水波浪Loading过渡动画 (3)

步骤9

最后为cirlce添加一个呼吸灯动画效果

.circle { animation: loadingBreath 5s infinite linear; } ```css @keyframes loadingBreath { 0% { box-shadow: 0 0 5px 0 #85f7fb; } 25% { box-shadow: 0 0 20px 0 #85f7fb; } 50% { box-shadow: 0 0 5px 0 #85f7fb; } 75% { box-shadow: 0 0 20px 0 #85f7fb; } 100% { box-shadow: 0 0 5px 0 #85f7fb; } }

得到最终效果图

结语

文章仅作为学习笔记，记录从0到1的一个过程

希望对您有所帮助，如有错误欢迎小伙伴指正～

我是 海轰ଘ(੭ˊᵕˋ)੭

如果您觉得写得可以的话，请点个赞吧

谢谢支持❤️

学习参考：

https://www.bilibili.com/video/BV1Ai4y1t7od
https://developer.mozilla.org/zh-CN/docs/Web/CSS/::before