首页 > 其他分享 >点击按钮出现波纹散开效果

点击按钮出现波纹散开效果

时间:2024-11-02 15:58:14浏览次数:3  
标签:水波纹 遮罩 const 点击 按钮 ripple 波纹 255

 

const handleClick = (event: MouseEvent) => {
  const button = event.currentTarget as HTMLElement;

  // 计算点击位置
  const rect = button.getBoundingClientRect();
  const x = event.clientX - rect.left;
  const y = event.clientY - rect.top;

  // 创建一个新的水波纹元素
  const ripple = document.createElement('span');
  ripple.style.left = `${x}px`;
  ripple.style.top = `${y}px`;

  // 将水波纹元素添加到按钮中
  button.appendChild(ripple);

  // 触发水波纹动画
  ripple.classList.add('ripple');

  // 动画结束后移除水波纹元素
  setTimeout(() => {
    ripple.remove();
  }, 500);
};

点击事件下面是css样式

.button-style {
    border-width: 0 !important;
    box-shadow: 0 1px 4px 0 rgba(80, 110, 228, 0.5) !important;
    background: linear-gradient(14deg, #506ee4 0%, rgba(80, 110, 228, 0.6)) !important;
    position: relative;
    overflow: hidden;
    z-index: 1;

    // &::before {
    //     content: '';
    //     position: absolute;
    //     top: 0;
    //     left: 0;
    //     width: 100%; // 确保伪元素覆盖整个按钮
    //     height: 100%; // 确保伪元素覆盖整个按钮
    //     background: rgba(255, 255, 255, 0.2); // 白色半透明遮罩
    //     opacity: 0;
    //     transition: opacity 0.3s ease-in-out;
    //     z-index: 2; // 确保遮罩层在按钮内容之上
    //     pointer-events: none; // 防止遮罩层影响按钮的点击和悬停事件
    // }

    // &:hover::before {
    //     opacity: 1;
    // }
    &>span.ripple {
        position: absolute;
        width: 0;
        height: 0;
        background: rgba(255, 255, 255, 0.5); // 白色半透明遮罩
        border-radius: 50%;
        transform: translate(-50%, -50%);
        animation: ripple 0.5s ease-out forwards;
    }

    @keyframes ripple {
        to {
            width: 200px;
            height: 200px;
            opacity: 0;
        }
    }
}

 

标签:水波纹,遮罩,const,点击,按钮,ripple,波纹,255
From: https://www.cnblogs.com/liziqian001/p/18522114

相关文章

  • PbootCMS 在网站管理后台增加点击数自定义修改功能
    修改模版:修改 apps/admin/view/default/content/content.HTML 文件。在 {if([$mod])} 下方添加点击数输入框:<divclass="layui-form-item"><labelclass="layui-form-label">浏览量<spanclass="layui-text-red">*</span></lab......
  • 自制自动点击器分享
    在windows中,时常会用到自动点击工具,尤其是在自动化操作或者定时操作,或者游戏用途,我特意制作一个功能强大的自动点击器,仅有不到100KB,压缩之后仅不到20KB,需要.NET支持,Win10和Win11默认支持点击免费下载功能:1.保存一系列点击任务,加载,删除功能2.显示任务执行的进......
  • xshell终端识别http ftp 链接 ctrl点击打开链接
    前言全局说明xshell终端识别httpftp链接ctrl点击打开链接一、说明终端链接可以直接点击,比复制一下方便很多二、开启,中断连接识别2.1点工具--选项2.2点键盘鼠标--鼠标按图片勾选免责声明:本号所涉及内容仅供安全研究与教学使用,如出现其他风险,后果自负。......
  • 学习笔记(十五):ArkUi-切换按钮 (Toggle)
    概述:提供状态按钮样式、勾选框样式和开关样式,一般用于两种状态之间的切换一、创建单选框接口形式如下:type为类型,支持三种1、Switch  不包含子组件Toggle({type:ToggleType.Switch,isOn:true}) 2、Checkbox不包含子组件Toggle({type:ToggleType.Checkbox,isOn:true}......
  • 学习笔记(十三):ArkUi-按钮 (Button)
    概述:按钮组件,通常用于响应用户的点击操作,其类型包括胶囊按钮、圆形按钮、普通按钮。Button做为容器使用时可以通过添加子组件实现包含文字、图片等元素的按钮。使用示例:一、创建Button1、创建不包含子组件的按钮Button('新增').type(ButtonType.Capsule).......
  • 微信小程序客服分享悬浮按钮代码
    以下代码可用于在微信小程序中的客服咨询与用户分享操作。按钮通过设置plain=‘true’来使其显示为简单的图标按钮,按钮的位置和样式通过CSS进行了详细的定制,确保在不同屏幕大小和设备上都能良好显示和使用,以下为参考代码。代码实现样式一,无文字有图片<buttonplain......
  • U8登录后不显示菜单,菜单栏空白,点击我的桌面任何菜单都提示“该操作员没有此功能权限”
    解决方案:1.客户端机器名改成英文2.服务器打上最新的FS补丁3.检查客户端到服务器的11525端口,4630端口,1433端口是否是通的注意:检查TCP端口的命令并不是ping,是telnet:telnet服务器IP4.检查应用服务器上配置的数据源和加密服务器地址如配置的是机器名,请务必检查客户端对......
  • el-button按钮操作
    <el-row:gutter="10"><el-col:span="1.5"><el-buttonv-has-permi="['system:user:add']"type="primary"plainicon="Plus"@click="handleAdd()"......
  • SAP-ABAP开发-按钮的三种调用方法
    1、自己创建调用在程序包中右击创建GUI状态,创建使用自己需要的按钮。注意的是,这里调用后会覆盖掉原来的系统的按钮。2、不覆盖系统的情况下加上自己创建的按钮并调用        右键GUI状态点击创建到界面后,点转到---》调整模板 。这里调整模板是指在系统基础上调整,......
  • 手机版简单的密码记录本:内置的记录在页面隐藏了删除按钮,页面上添加的显示删除按钮
    <!DOCTYPEhtml><htmllang="zh-CN"><head> <metacharset="UTF-8"> <title>账号密码备忘录</title> <style> body{ width:100vw; height:100vh; margin:0; padding:0; background-color:......