给圆点添加呼吸动画，老板说我很有想法
需求简介
这几天老板安排了一个活：要实现一些异常信息点的展示，展示的方式就是画一个红色的点。
需求很简单，我也快速实现了。但是想着我刚入职不久，所以得想办法表现一下自己。于是，我自作主张，决定给这个小圆点实现一个呼吸的效果动画。
实现方案
要实现这样一个小圆点的动画非常简单，借助css的animation实现即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Breathing Circle Animation</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
// 白边红色小圆点
<div class="dot">
// 小圆点的背景元素
<div class="breathing-background"></div>
</div>
</body>
</html>
.dot {
display: inline-block;
width: 10px;
height: 10px;
border: 2px solid #fff;
border-radius: 50%;
background-color: red;
position: relative;
z-index: 1;
}
.breathing-background {
position: absolute;
width: 10px;
height: 10px;
border-radius: 50%;
opacity: 0.2;
animation: breathing 2s cubic-bezier(0, 0, 0.25, 1) infinite;
}
// 动画 变大再变小
@keyframes breathing {
0% {
transform: scale(1);
}
50% {
transform: scale(5);
opacity: 0.2;
}
100% {
transform: scale(5);
opacity: 0;
}
}
上面的动画实现主要依赖于CSS关键帧动画和定位属性。
- 定位：通过设置.dot为相对定位（position: relative）和.breathing-background为绝对定位（position: absolute），确保两个元素在同一个位置上重叠。
- 层叠顺序：使用z-index属性确保.dot在.breathing-background的前面，从而保证红色小圆点在呼吸动画背景上显示。
- 动画效果：@keyframes breathing定义了从正常尺寸到放大再到透明的动画过程，通过transform: scale和opacity属性的变化来实现呼吸效果。
- 动画循环：通过animation属性设置动画的持续时间、缓动函数和无限循环，使呼吸动画效果持续进行。
上面的代码很简单，实现的效果也简单粗暴
老板反应
做完之后，我很高兴的就提交代码了，我很满意自己小改动。
过了很久，老板看后，把我叫到办公室，深色凝重的说了一句：你很有想法。
随后老板又问我，你加这个闪烁的背景想表达啥？
我一时语塞，解释：这样不是看起来更好看，更能清晰的表达这个异常的状态吗？
老板又怼我，谁让你乱加动画了？时间多的没处用是吧？删了。
我不太理解老板为啥生气，回去后也是默默地删除了代码。。。。。
后来我反思了一下，程序员还是别乱加自己的想法在需求里，毕竟我们还是不懂产品，做的越多，错的越多。做好本分工作就行了。
作者：快乐就是哈哈哈
来源：juejin.cn/post/7376172288977879091
来源：juejin.cn/post/7376172288977879091
