前端button组件实现涟漪效果
前言
在前端项目中,我们常常会使用到
button
组件进行事件的触发,而一些项目为了更好的交互效果,加入了一系列的动画,例如:脉冲、果冻、涟漪、滑箱等特效。
今天我们来讲讲如何使用HTML
CSS
和JavaScript
来实现涟漪效果,我们先看下成品:
看完是不是也想给自己项目整一个这样子的效果😎😎
原理
如图,我们需要两个元素来实现这个涟漪效果,当button
被点击时,在button
元素中放置一个元素,执行一个绽开动画效果,执行完毕后把buttion
里的元素移除。
用码实现
码出基本样式
先创建一对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;
}
当样式写完之后我们按钮的样式就跟效果图上的按钮一模一样了,由于我们JavaScript
部分还没有写以及实现涟漪效果还没有实现,此时我们点击按钮是没有涟漪效果的,接下来我们要就添加涟漪效果了。
👇 👇 👇 继续往下看 👇 👇 👇
码出链漪
给按钮添加一个涟漪效果,在按钮div
中添加一个span
标签,并绑定一个overlay
类
<div id="btn" class="button">
Click me
<span class="overlay"></span>
</div>
这个span
标签是我们要实现涟漪效果的元素,给元素设置绝对定位,让元素脱离文件流,不为该元素预留出空间。默认我们定义在top:0
和left: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来获取鼠标点击位置来决定绽开的位置。
注意
把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
标签,获取鼠标点击页面的x
和y
值,绑定对应的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);
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanekik
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
excel下划线不显示怎么办
PHP中文网 06-23 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
photoshop蒙版画笔没反应怎么办
PHP中文网 06-24