likes
comments
collection
share

给圆点添加呼吸动画，老板说我很有想法

作者站长头像
站长
· 阅读数 23

需求简介

这几天老板安排了一个活：要实现一些异常信息点的展示，展示的方式就是画一个红色的点。

给圆点添加呼吸动画，老板说我很有想法

需求很简单，我也快速实现了。但是想着我刚入职不久，所以得想办法表现一下自己。于是，我自作主张，决定给这个小圆点实现一个呼吸的效果动画。

给圆点添加呼吸动画，老板说我很有想法

实现方案

要实现这样一个小圆点的动画非常简单，借助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属性设置动画的持续时间、缓动函数和无限循环，使呼吸动画效果持续进行。

上面的代码很简单，实现的效果也简单粗暴

给圆点添加呼吸动画，老板说我很有想法

老板反应

做完之后，我很高兴的就提交代码了，我很满意自己小改动。 过了很久，老板看后，把我叫到办公室，深色凝重的说了一句：你很有想法。

随后老板又问我，你加这个闪烁的背景想表达啥？

我一时语塞，解释：这样不是看起来更好看，更能清晰的表达这个异常的状态吗？

老板又怼我，谁让你乱加动画了？时间多的没处用是吧？删了。

我不太理解老板为啥生气，回去后也是默默地删除了代码。。。。。

后来我反思了一下，程序员还是别乱加自己的想法在需求里，毕竟我们还是不懂产品，做的越多，错的越多。做好本分工作就行了。

转载自:https://juejin.cn/post/7376172288977879091
评论
请登录