阅读 1488
前端button组件之涟漪效果|8月更文挑战

前端button组件之涟漪效果|8月更文挑战

前言

在前端项目中,我们常常会使用到button组件进行事件的触发,而一些项目为了更好的交互效果,加入了一系列的动画,例如:脉冲、果冻、涟漪、滑箱等特效。

今天我们来讲讲如何使用HTML CSSJavaScript来实现涟漪效果,我们先看下成品:

1.gif

5.png

看完是不是也想给自己项目整一个这样子的效果😎😎

原理

如图,我们需要两个元素来实现这个涟漪效果,当button被点击时,在button元素中放置一个元素,执行一个绽开动画效果,执行完毕后把buttion里的元素移除。

2.png

用码实现

码出基本样式

先创建一对div标签,作为一个基础按钮元素。后面我们将这对div称之为按钮。

<div id="btn" class="button">Click me</div>
复制代码

为按钮添加基本样式,这里需要给按钮设定position:relative,后续我们涟漪效果是通过绝对定位来实现的。

.button {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    position: relative;
    display: inline-block;
    color: #fff;
    padding: 14px 40px;
    background: linear-gradient(90deg, #0bc7f1, #c471ed);
    border-radius: 45px;
    margin: 0 15px;
    font-size: 24px;
    font-weight: 400;
    text-decoration: none;
    overflow: hidden;
    box-shadow: 1px 1px 3px #7459e9;
}
复制代码

3.png

当样式写完之后我们按钮的样式就跟效果图上的按钮一模一样了,由于我们JavaScript部分还没有写以及实现涟漪效果还没有实现,此时我们点击按钮是没有涟漪效果的,接下来我们要就添加涟漪效果了。

👇 👇 👇 继续往下看 👇 👇 👇

码出链漪

给按钮添加一个涟漪效果,在按钮div中添加一个span标签,并绑定一个overlay

<div id="btn" class="button">
    Click me
    <span class="overlay"></span>
</div>
复制代码

这个span标签是我们要实现涟漪效果的元素,给元素设置绝对定位,让元素脱离文件流,不为该元素预留出空间。默认我们定义在top:0left:0,再通过transform属性将元素偏移居中对齐。透明度设置0.5,绑定一个blink帧动画函数。

.overlay {
    position: absolute;
    height: 400px;
    width: 400px;
    background-color: #fff;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    opacity: .5;
    animation: blink .5s linear infinite;
}
复制代码

添加一个帧动画,命名为blink,将span元素的宽度,高度从0px过渡到400px,及透明度从设定的0.5过渡到0,渐渐向外绽开,这样子就形成了涟漪效果了,当我们把span元素挂载上去我们可以看下效果,接下来我们将通过JavaScript来获取鼠标点击位置来决定绽开的位置。

4.gif

注意

div中的span标签删除或者注释掉,后面我们将使用JavaScript来添加这个span标签

div中的span标签删除或者注释掉,后面我们将使用JavaScript来添加这个span标签

div中的span标签删除或者注释掉,后面我们将使用JavaScript来添加这个span标签

码出点击效果

这里我们先引入jQuery这个库,为了方便使用,这里我就使用cdn方式来引入。

这里给大家推荐一个国内的CDN库:www.bootcdn.cn

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
复制代码

创建一个addRipple方法,先创建一个绑定overlay类的span标签,获取鼠标点击页面的xy值,绑定对应的left值和top值,绑定之后把span元素添加到div中。

设定一个定时器,当动画执行完毕后把span元素移除掉,减少内存的占用。

const addRipple = function (e) {
    let overlay = $("<span class='overlay'></span>")
    const x = e.clientX - e.target.offsetLeft
    const y = e.clientY - e.target.offsetTop;
    overlay.css(
        {
            left: x + 'px',
            top: y + 'px'
        }
    )
    $(this).append(overlay)
    setTimeout(() => {
        overlay.remove()
    }, 500)
}
复制代码

div绑定addRipple事件,按钮就实现跟开头效果图一样的页面啦!

$('#btn').click(addRipple);
复制代码

1.gif

5.png

最后

😉 如果你觉得本文对你有所帮助 请留个赞 😉

文章分类
前端
文章标签