内容简介:作为一个 CSS 渣,这次在看到一个 Vue 组件库的按钮里有个点按之后的效果之后跃跃欲试。效果大概长这样:
作为一个 CSS 渣,这次在看到一个 Vue 组件库的按钮里有个点按之后的效果之后跃跃欲试。
效果大概长这样:
首先先观察了一番,大概得到以下特征:
- 以鼠标按下的位置为原点,以 某个值 为半径进行扩散
- 在长宽、以及透明度上,均有渐变
原本是 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.offsetX
和 event.offsetY
,但是如果光这样对 background
进行绝对定位,达到的效果是以起始点为左上角开始的动画,为了变成中心点,我们自然想到了 transform: translate(-50%, -50%)
,成功把左上角转成了中心点。
接下来,我们需要确定动画中圆的半径,考虑到 button
通常都是宽 > 长的,所以取宽( button.clientWidth
)为半径做圆。
另外,我们要保证鼠标点击在任一按钮区域都可以填充满,所以宽度至少需要为本身的 3 倍。
最终,我们的样式是:
{ left: event.offsetX + 'px', top: event.offsetY + 'px', width: button.clientWidth * 3 + 'px', height: button.clientWidth * 3 + 'px' }
全部准备完成之后,使用 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); }
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- 【博物纳新】水面涟漪反射效果开源库测评
- React Suite 3.2.4 发布,改善涟漪效果
- 按钮穿透点击实现方式
- 如何更好的控制按钮样式
- 通过按钮单击保存PhpSpreadSheet
- 撸一款”灵动“的滑动按钮
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
科技投资新时代:TMT投资方法、趋势与热点聚焦
马军、宋辉、段迎晟 / 人民邮电出版社 / 2018-3 / 69.00
中国 TMT 行业(科技、媒体及通信)起步较晚但充满朝气。2017 年,TMT 板块的IPO 数量占到了总数的四分之一;对于投资者来说,投资 TMT 的收益非常可观。那么,TMT 的投资趋势如何? TMT 行业又有哪些投资热点? 本书立足于 TMT 投资现状,在介绍了 TMT 投资的基本概念之后,作者详细讲述了TMT 投资的基本研究方法、分析视角、整体行情及趋势分析,同时从行业视角分析了包括......一起来看看 《科技投资新时代:TMT投资方法、趋势与热点聚焦》 这本书的介绍吧!