CSS

2024-04-11 11:29| 来源: 网络整理| 查看: 265

笔者最近面试恰好碰到此题，以往做这类的需求往往都是问设计师要两张呼吸前后的图片，更或者直接GIF完事，真要开始纯用CSS3的一时半会摸不着头脑，于是乎自己准备认真撸上一发按钮呼吸，看看有什么幺蛾子。首先先看别人家的预览图，咱们得照着做一个：

第一眼分析：

中间白圈内若隐若现两边白圈成波纹铺开 1.第一步，先找到一张箭头图

笔者去阿里font白嫖了一张~

为了比较好看出效果，采取了透明底图片，dom元素深色背景。如下

2.开始造圈圈 html, body { height: 100vh; background: #0078db; } #breath-btn { width: 80px; height: 80px; position: relative; display: inline-block; margin: auto 50%; margin-top: 200px; display: flex; justify-content: center; align-items: center; } .white-border{ border: 2px solid #fff; border-radius: 50%; display: flex; justify-content: center; align-items: center; width: 50px; height: 50px; } .arrow { width: 70%; }

差不多整体布局出来了

3.中间白圈内若隐若现

通过写个动画@keyframes来定义

#inner { animation: OpacityBreath 2s ease-in-out infinite; opacity: 0.3; } @keyframes OpacityBreath { 0% { opacity: 0.3; } 50% { opacity: 0.65; } 100% { opacity: 0.3; } }

看起来像回事，先暂定如此。

4.创造波纹

重头戏来了。通过慢放仔细观察，发现外圈率先弹出，但是内圈速度更快。至于做法采用transform的scale把圈子扩大，同时加上透明度变化。外层的波纹都用伪类来做节省dom元素，活用伪类真方便。

#breath-btn::before, #breath-btn::after { content: ''; border: 2px solid #fff; width: 50px; height: 50px; position: absolute; opacity: 0; border-radius: 50%; } @keyframes Wave { 0% { transform: scale(1); opacity: 0.3; } 100% { transform: scale(2); opacity: 0; } } 5.波纹动起来。

看到这里想让波纹动起来应该没啥难度吧，笔者当时也这么想。不假思索的写下以下样式

#breath-btn::before { animation: Wave 1.1s ease-in-out infinite; } #breath-btn::after { animation: Wave 0.7s ease-in-out 0.4s infinite; }

最外层的圈设置1.1s走完，内层速度要快0.7s，0.4s延迟时间，造成视觉上的追击感。但是问题来了，animation的delay time只有第一次生效，这真的是坑爹啊，第一次追击成功后面整个就是乱套，真希望CSS能把这个属性在补强一点。于是乎笔者最后采用脚本解决：

.breath-btn-animation::before { animation: Wave 1.1s ease-in-out; } .breath-btn-animation::after { animation: Wave 0.7s ease-in-out 0.4s; } function toggleWave() { $('#breath-btn').toggleClass('breath-btn-animation'); setTimeout(() => { toggleWave() }, 1800) } toggleWave();

通过jquery动态切换breath-btn-animation，让两层波纹圈跳动一次，再设置延迟时间，最终效果如下：

最终效果相差无几，需要调整的就是动画时间和曲线算法了。

总结

开发小小的一个按钮呼吸态，不禁感叹CSS是真神奇，开发途中还遇到一个transform-origin的问题导致更改了布局采用了伪类，这个放到下期再研究吧。

ps(掘金的富文本编辑太难用了，复制代码一定要纯文本粘贴，不然换行符GG)

【本文地址】

公司简介

联系我们