js + css实现点击 波纹效果

请叫我海龟先生 等级 939 0 0
标签: Javascript

有时候我们为了增加用户体验,可能会有一些点击样式 类似框架中的haver-class 这里简单用 js+css 实现一个点击效果(类似水波纹)

大体思路 1.获取点击时 鼠标坐标(相对于父元素) 2.在当前点 创建 节点(设置对应的样式) 3.设置定时器,移除节点--Ok

js + dom

<div class="box">
        <button>点击试试1</button>
        <button>点击试试2</button>
    </div>
    <script>
        const btn = document.querySelectorAll('button')
        btn.forEach((item)=>{
            item.addEventListener('click',function(e){
                // clientX-距离浏览器左边界  e.target.offsetLeft--目标容器左边界
               let x = e.clientX - e.target.offsetLeft
               let y = e.clientY - e.target.offsetTop
                // 创建 span
               let ripples = document.createElement('span')
                // 设置 span位置
               ripples.style.left = x + 'px'
               ripples.style.top = y + 'px'
                // 添加节点
               this.appendChild(ripples)
                // 移除
               setTimeout(() => {
                ripples.remove()
               }, 2000);
            },false)
        })
    </script>
部分css
.box{
            margin-top: 50px;
            width: 300px;
            height: 300px;
            margin: 0 auto;
            border: 1px solid #f40;
            text-align: center;
            line-height: 100px;
        }
        button{
                width: 180px;
                height: 60px;
                text-align:center;
                border-radius: 20px;
                background: linear-gradient(90deg,#0162cb,#55e7fc);
                letter-spacing: 10px;
                display: block;
                border: none;
                margin: 50px auto;
                position: relative;
                overflow: hidden;
                outline: none;
            }
        span{
            position: absolute;
            background: #ffffff;
            /* border-radius: 50%; */
            transform: translate(-50%,-50%);
            pointer-events: none;
            animation: animate 2s linear infinite;

        }
        @keyframes animate {
            0%{
                width: 0px;
                height: 0px;
                opacity: .5;
                border-radius: 50%;
            }
            100%{
                width: 500px;
                height: 500px;
                opacity: 0;
            }
        }

效果图 js + css实现点击 波纹效果

收藏
评论区

相关推荐

只听说过CSS in JS,怎么还有JS in CSS?
CSS in JS是一种解决css问题想法的集合,而不是一个指定的库。从CSS in JS的字面意思可以看出,它是将css样式写在JavaScript文件中,而不需要独立出.css、.less之类的文件。将css放在js中使我们更方便的使用js的变量、模块化、treeshaking。还解决了css中的一些问题,譬如:更方便解决基于状态的样式,更容易追溯依赖关
JS和CSS加载(渲染)机制不同
一、结论 ==== CSS可以在页面加载完成后随时渲染。举个例子:通过js给某个元素加一个id或者css,只要这个id或者css有对应的样式,此元素的样式就会自动生效。 JS不可以在页面加载完成后生效。最明显的例子就是使用EasyUI的时候,iframe中哪些样式无效(EasyUi是依靠JS进行样式处理的,所以无法运行JS,那么样式也就无法设置。简单点说
JS导出页面为PDF文件,该如何操作?来看一眼就明白啦!
废话不多说,直接上代码。 1.资源文件或依赖 <script type="text/javascript" src="https://my.oschina.net//u/4265132/blog/4054317/js/canvg2.js"></script><script type="text/javascript" src="https://m
java中ajax的用法简单案例
1.index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="js/jquery-2.1.0.js">
23、Django实战第23天:视频播放页面
打开素材course-play.html,会发现播放页面处了包含播放器,其他和“章节”页面一样。 1、把course-play.html复制到template目录下 2、把下面两段代码拷贝出来 <link rel="stylesheet" type="text/css" href="../css/video-js.min.css">
Array.prototype.slice.call()的理解
最近在看廖雪峰的JS课程,浏览器中的操作DOM的那一章,有这样一道题。 * JavaScript * Swift * HTML * ANSI C * CSS * DirectX <!-- HTML结构 --> <ul id="test-list"> <li>JavaScript</li>
Django(十二)视图
一、Ajax基本概念 ========== 【参考】:[https://www.runoob.com/jquery/jquery-ajax-intro.html](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fwww.runoob.com%2Fjquery%2Fjquery-ajax-i
Go 1.16 embed特性的简单应用
项目结构如下: └─ui └─embed_ui.go └─dist └─index.html └─static ├─css └─ ... ├─fonts
JavaScript
### Javascript简介 web前端有三层: * HTML:从语义的角度,描述页面的结构 * CSS:从审美的角度,描述样式(美化页面) * Javascript:从交互的角度,描述行为(提升用户体验) ### JavaScript的组成 * ECMAScript5.0:定义了js的语法标准:包含变量、表达式、元素符、函数、i
JavaScript基础知识
**1:从一个界面跳转到其他界面** window.location.href="b.html" **2:判断变量是否为空** typeof obj == 'undefined' || obj == null || obj == "" **3:html引用公用的css和js** <script type="text/javascript" src=
JavaScript学习笔记
JavaScript学习笔记 ============== 和HTML和CSS不一样,它是一门编程语言。 JS简介 ---- JS是一个客户端脚本语言,不需要编译,每一个浏览器都有JS的解析引擎。可以增强用户和HTML页面的交互,使网页产生动态。 JS的生成是在当时网速所限,必须在客户端就完成一些表单的校验等工作以减少客户端和服务器端的通信次数的实际
JavaScript的入门简介
#### 什么是 JavaScript JavaScript,我们一般简称为 JS,是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。 JavaScript 现在已经被用到了很多非浏览器环境中,JavaScript 基于原型编程、多范式的动态脚本语言,并支持面向对象、命令式和声明式风格。 HTML、CSS、JavaScript三者不同的功能:
Javascript基础知识学习(三)
**前言:** javascript是一种轻量的、动态的脚本语言,我们为什么要使用javascript ?对于一个网页的设计,.html用来放置网页的内容,.css则用来设计网页的样式和布局,那么.js它主要是使网页能够产生交互,意思就是能够通过代码动态的修改HTML、操作CSS、响应事件、获取用户计算机的相关信息等。javascript不是所有的浏览器
Springmvc异步上传文件
<script src="js/jquery.js" type="text/javascript"></script><script src="js/jquery.ext.js" type="text/javascript"></script><script src="js/jquery.form.js" type="text/javascript"
StringFormatter,一个javascript编写的字符串格式化库
`StringFormatter JS`是一个js编写的可扩展的javascript字符串格式化库,它的功能远远超出了ECMA6标准所规定的字符串格式化规则。 它的内置转换功能如下: 1. 字符串 2. 所有数值类型包括整数,小数,十六进制,八进制,百分比和金融符号以及对`NaN`和`Infinity`的特殊处理 3. 布尔型 4. 数组和对象