🐳 前言
- 不知道大家平时有没有留意水滴落下的瞬间。
- 仔细去听，仔细去看，每一滴滴水珠落下泛起的涟漪都让人意向连篇。
- 一个个显现而消失的涟漪就像时光仿佛带走了什么，还是留下了什么，又似乎一切都没有变，却又感觉多了些什么，让人情不自禁想要点一个
赞~~ - 好了不开玩笑了我们来试试做这个涟漪按钮。
🤽♂️ ToDoList
- 一片静好
- 蜻蜓点水
- 阵阵微波
🚿 Just Do It
- 其实做一个这样的效果无非就是中间的按钮旁边会有两个渐渐变大的阴影，而当时间的推移，随着阴影范围变大也渐渐消失。
🌱 一片静好
- 我们先做一个平静的湖面，也就是我们的按钮。
/** index.html **/ <div class="waterButton"> <div class="good"> <div class="good_btn" id="waterButton"> <img src="./good.png" alt=""> </div> <span id="water1"></span> <span id="water2"></span> </div> </div> 复制代码
- 在基本布局中我们需要一个
div包裹住一个点赞图片来表示一个按钮，另外还需要两个span标签来表示即将泛起涟漪，这个到后面会用到。
/** button.css **/ .waterButton { height: 27rem; display: flex; justify-content: center; align-items: center; } .good { width: 6rem; height: 6rem; position: relative; } .good_btn { width: 6rem; height: 6rem; display: flex; justify-content: center; align-items: center; border-radius: 50%; z-index: 3; cursor: pointer; box-shadow: .4rem .4rem .8rem #c8d0e7,-.4rem -.4rem .8rem #fff; } img{ width: 50%; height: 50%; z-index: 4; } 复制代码
- 因为是模拟在水中的效果所以如果按钮的阴影特别单一相同就不好了，这时候我们可以让按钮上面白色阴影下面灰色阴影，在这里推荐一个网站给大家如果需要制作这些阴影可以在这里调试 Neumorphism.io。
🍃 蜻蜓点水
- 因为是按钮我们需要一个点击事件来模拟水滴滴入湖中的感觉。
- 而水波荡漾的感觉其实可以做成一个动画，让一个跟按钮一样的元素逐渐缩放到两倍后慢慢消失，我们可以使用两个这样的元素来在视觉上产生水波一个接一个的感觉。
.good_water-1, .good_water-2 { width: 6rem; height: 6rem; border-radius: 50%; z-index: -1; position: absolute; top: 0; left: 0 ; filter: blur(1px); } .good_water-1 { box-shadow: .4rem .4rem .8rem #c8d0e7, -.4rem -.4rem .8rem #fff; animation: waves 2s linear; } .good_water-2 { box-shadow: .4rem .4rem .8rem #c8d0e7, -.4rem -.4rem .8rem #fff; animation: waves 2s linear 1s; } @keyframes waves { 0% { transform: scale(1); opacity: 1; } 50% { opacity: 1; } 100% { transform: scale(2); opacity: 0; } } 复制代码
- 跟按钮一样我们给两个水波元素也加上不同的阴影，这样的感觉会更有立体感，而为了营造水波逐渐消失的感觉，我们需要给一个过渡属性
filter: blur(1px)。
/** JS **/ <script> let btn=document.getElementById('waterButton') let water1=document.getElementById('water1') let water2=document.getElementById('water2') let timer='' btn.addEventListener('click', ()=>{ window.clearTimeout(timer) water1.classList.add("good_water-1"); water2.classList.add("good_water-2"); setTimeout(()=>{ water1.classList.remove("good_water-1"); water2.classList.remove("good_water-2"); }, 3000) }) </script> 复制代码
- 接下来我们设定点击事件来动态添加样式并在动画结束后移除样式，这样我们来看看效果吧~
💦 阵阵微波
- 如果我们不希望水波这么快停下的话，我们也可以设置水波动画为无限循环，这样的话我们就不需要点击按钮的时候再加样式了，我们之间把样式加到水波上，然后给
animation设置无限循环播放infinite
.good_water-1 { ... animation: waves 2s linear infinite; } .good_water-2 { ... animation: waves 2s linear 1s infinite; } 复制代码
- 接下来我们来看看效果吧~是不是还不错呢。
👋 写在最后
- 首先感谢大家看到这里，这次分享的只是学习
css中的一些乐趣，对于业务上可能不太实用，但是图个乐嘛~上班这么累，多用前端做点好玩的事情。 - 前端世界太过奇妙，只有细心的人才能发现其乐趣，希望可以帮到有需要的人。
- 如果您觉得这篇文章有帮助到您的的话不妨🍉关注+点赞+收藏+评论+转发🍉支持一下哟~~😛您的支持就是我更新的最大动力。
- 如果想跟我一起讨论和学习更多的前端知识可以加入我的前端交流学习群，大家一起畅谈天下~~~
