js + css实现点击 波纹效果

请叫我海龟先生 等级 682 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大法》之使用伪元素实现超实用的图标库(附源码
今天我们来复盘一下前端中css伪元素的知识以及如何用css伪元素来减轻javascript的压力,做出一些脑洞大开的图形。 预备知识 伪元素 伪元素是一个附
如何使用css3实现一个类在线直播的队列动画
之前在群里有个朋友问了这样一个问题, 就是如何在小程序中实现类似直播平台的用户上线时的队列动画? 作为一名前端工程师, 解决方案无非以下2种: 1. 使用javascript根据条件来控制元素的样式实现队列动画 2. 用纯css3配合数据驱动模型来实现. 大家都知道在现代的Web开发中, 我们能使用Css实现的效果尽量不要用Js, 所以我们应该优先考虑用C
2. web前端开发分享-css,js进阶篇
2. web前端开发分享css,js进阶篇 一,css进阶篇:   等css哪些事儿看了两三遍之后,需要对看过的知识综合应用,这时候需要大量的实践经验, 简单的想法:把qq首页全屏另存为jpg然后
30个前端开发人员必备的顶级工具
在本文中,我为前端Web开发人员汇总了30种顶级工具,从代码编辑器和代码游乐场到CSS生成器,JS库等等。 (https://imghelloworld.osscnbeijing.aliyuncs.com/2e7966318084a45d05a0926cbd749a02.png) 目录 CSS代码生成器 CSS3 Generator
前端面试题自检 JS CSS 部分
JS类型 JavaScript的简单数据类型Number , String , Boolean , Undefined , Null , Symbol typeof 操作符的返回值 number string boolean undefined object function
js-Answers一
JavaScript的组成 JavaScript 由以下三部分组成: 1. ECMAScript(核心):JavaScript 语言基础 2. DOM(文档对象模型):规定了访问HTML和XML的接口 3. BOM(浏览器对象模型):提供了浏览器窗口之间进行交互的对象和方法 JS的基本数据类型和引用数据类型
VUE3(七)vue项目抽离.vue文件中的js、css代码
平常再做开发的时候,一般情况下不会将html,js,css代码写到一个文件中。基本上都会写在各自对应的文件中,然后再引入即可。那么在VUE中我们如何抽离vue文件中的js,与css代码呢? 1:抽离javascriptHome.vue<template <div <div :style"{ padding: '24px', back
「组件」返回顶部按钮
样式如图1:在components文件夹下新建BackTop.vue js<template <div class"backTopBtn" <a href"javascript:;" <div vif"btnFlag" class"btn" @click"backTop"TOP</div
js去除字符串
js去除字符串js<DOCTYPE html<html<head <title</title</head<body</body<script type"text/javascript" function delHtmlTag(str){   return str.replace(/<^/g,""); } var s
只听说过CSS in JS,怎么还有JS in CSS?
CSS in JS是一种解决css问题想法的集合,而不是一个指定的库。从CSS in JS的字面意思可以看出,它是将css样式写在JavaScript文件中,而不需要独立出.css、.less之类的文件。将css放在js中使我们更方便的使用js的变量、模块化、treeshaking。还解决了css中的一些问题,譬如:更方便解决基于状态的样式,更容易追溯依赖关
你可能不知道的10个CSS新功能(2021版)
多年来,CSS已经超越了背景颜色、边框、文本样式、边距和盒模型。现代CSS能够提供一系列的功能,而在过去,您需要JavaScript或变通方法来实现这些功能。 为了庆祝它在2021年取得的成就,在这篇文章中,我们想看看一些你可能不知道的令人惊叹的CSS新特性。我们将强调web设计人员和开发人员可以用现代CSS做的很酷的事情,讨论用例,浏览器支持,并给你一个
Fower: 一个可在 Vue 和 React 方便使用的 CSS in JS 库
一年多没写过文章了,今天给大家介绍一个我断断续续花了半年开发的 CSS 项目: . Fower 是什么?Fower 是一个让你高效开发 UI 的样式工具库,目标是让你写 CSS 不再痛苦。Fower 的核心特点是原子化(Atomic/utilityfirst)、类型安全(Type Safe)、CSS in JS,它非常注重开发体验,让你快速且开心的开发界面。
天哪!几行js代码就可以实现拳皇小游戏
前言今天,我们用原生JS实现一个拳皇人物位置控制的小效果。话不多说,我们赶紧来看下如何实现吧!效果(非静止八神)分别按W、S、A、D键可实现位置移动,并且效果真实。源码html与css很简单,主要是js中有几点需要注意的。<!DOCTYPE html <html lang"en" <head  <meta charset"UTF8"  <title游
javascript实践教程-01-javascript介绍
本节目标1. 了解javascript是什么。2. 了解javascript能干什么。 内容摘要本篇介绍了javascript是什么,为什么要用javascript,ECMAScript标准是什么等。阅读时间大约510分钟。 javascript是什么?javascript是世界上最流行的脚本语言,因为你在电脑、手机、平板上浏览的所有的网页,以及无数基于HT
javascript实践教程-02-javascript入门
本节目标1. 掌握如何编写javascript代码。2. 掌握javascript的3个弹框。3. 掌握javascript的注释。4. 掌握浏览器的调试工具控制台。 内容摘要本篇介绍了如何在网页上编写js代码,如何引入外部js代码文件,js的3个弹框、注释语法,还有浏览器调试工具的控制台使用。阅读时间1520分钟。 script标签如果我们需要在网页中编写