CSS 在按钮上做个涟漪效果

CSS 在按钮上做个涟漪效果(Ripple Animation)

原文链接:codesky.me

作为一个 CSS 渣,这次在看到一个 Vue 组件库的按钮里有个点按之后的效果之后跃跃欲试。

效果大概长这样:

2018-08-26 13.20.35.gif

首先先观察了一番,大概得到以下特征:

  1. 以鼠标按下的位置为原点,以某个值为半径进行扩散
  2. 在长宽、以及透明度上,均有渐变

原本是 Vue 实现的,但剥离框架实现,就还得在 JavaScript 上哲学一番,为此,我实现了一个较为简单的效果,这篇文章基本上是逐行总结解读:

HTML 结构:

<button>
  <span class="background"></span>
  <span class="content">涟漪效果</span>
</button>

勿用说明,这个按钮是由内容和涟漪效果的背景组成的,内容在 Vue 中也就是 <slot> 进来的文本。

之后,大致写一些基本样式,和动画核心代码没有太大关系:

button {
  overflow: hidden;
  border: 1px solid #000;
  padding: 12px;
  cursor: pointer;
  position: relative;
  margin: 10px;
}

.content {
  position: relative;
  display: inline-block;
}

要实现这个效果,我们主要考虑的就是上述总结的两点,首先,如何以一个地方为中心点,向两边扩散。

为了获取鼠标位置,我们使用的是 event.offsetXevent.offsetY,但是如果光这样对 background 进行绝对定位,达到的效果是以起始点为左上角开始的动画,为了变成中心点,我们自然想到了 transform: translate(-50%, -50%),成功把左上角转成了中心点。

接下来,我们需要确定动画中圆的半径,考虑到 button 通常都是宽 > 长的,所以取宽(button.clientWidth)为半径做圆。

另外,我们要保证鼠标点击在任一按钮区域都可以填充满,所以宽度至少需要为本身的 3 倍。

最终,我们的样式是:

{
    left: event.offsetX + &#39;px&#39;,
    top: event.offsetY + &#39;px&#39;,
    width: button.clientWidth * 3 + &#39;px&#39;,
    height: button.clientWidth * 3 + &#39;px&#39;
}

全部准备完成之后,使用 transition 对我们的动画进行补间:

transition: width 3s ease, height 3s ease, opacity 1s ease;

全部的代码和效果见下方 jsfiddle 的演示:

但是,如果我们使用 CSS Houdini,整个动画的实现将会是非常容易的:

.ripple {
  --gradient: linear-gradient(to bottom right, deeppink, orangered);
  background: var(--gradient);
}
.ripple.animating {
  background: paint(ripple), var(--gradient);
}

效果可见:css-houdini.rocks/ripple/

评论 抢沙发

表情
  1. #1

    来自安徽合肥的用户 7天前
    满满的干货,受益匪浅!如果排版再弄好看点,可能点赞数更高

  2. #2

    来自北京朝阳的用户 17天前
    老哥,写得很不错

  3. #3

    来自北京昌平的用户 23天前
    大神 听说你又有才 人又帅,明明可以靠脸吃饭,可是你偏要靠才华,鼓励师都被你撩了我们怎么办