CSS-涟漪效果的按钮

<a href="#">涟漪效果按钮</a>
<a href="#">涟漪效果按钮</a>

 *{margin: 0;padding: 0;text-decoration: none;}body{display: flex;justify-content: center;align-items: center;height: 100vh;background-color: black;}a{position: relative;display: inline-block;padding: 1em 2em;margin: 10px;color: #fff;border-radius: 40px;letter-spacing: 2px ;font-size: 18px;overflow: hidden;background: linear-gradient(90deg,#0612c8,#55e7fc);}a:nth-child(2){background: linear-gradient(90deg,#755bea,#ff72c0);}a span{background-color: #fff;position: absolute;transform: translate(-50%,-50%);animation: move 1s linear infinite;border-radius: 50%; pointer-events: none;/*解决JS鼠标事件穿透到子标签*/}@keyframes move{from{width: 0;height: 0;opacity: .7;}to{width: 500px;height: 500px;opacity: 0;}}

const btns=document.querySelectorAll("a");btns.forEach(item=>{item.addEventListener("click",function (e){//获取坐标//e.clientX=相对于浏览器鼠标的x、y坐标//e.target.offsetLeft=目标对象(按钮)距离最左边的距离const x=e.clientX-e.target.offsetLeftconst y=e.clientY-e.target.offsetToplet span=document.createElement("span");span.style.left=x+'px'span.style.top=y+'px'//a标签里再添加标签spanthis.appendChild(span)setTimeout(() => {//1秒后span标签移除(因为不能让span一直冒泡)span.remove();}, 1000);})})

CSS-涟漪效果的按钮相关推荐

html涟漪动画效果,CSS 在按钮上做个涟漪效果（Ripple Animation）
作为一个 CSS 渣,这次在看到一个 Vue 组件库的按钮里有个点按之后的效果之后跃跃欲试. 效果大概长这样: 首先先观察了一番,大概得到以下特征: 以鼠标按下的位置为原点,以某个值为半径进行扩散 ...
【每日一练】68—CSS实现一组渐变按钮动画效果
在之前,我们也练习过一些按钮动画的效果,今天我们再来练习一组CSS实现的按钮动画效果,下面是今天练习的最终效果: 接下来,我们再来看一下这个案例的源码. HTML代码: <!doctype ht ...
android涟漪动画,如何添加涟漪效果并在android中的按钮上有自定义背景？
请告诉我如何实现这两个目标,我已经解决了很多已经存在的问题,但他们并没有专门处理我的问题. 我想在我的按钮上产生涟漪效果,并且它应该是圆形的并且具有背景颜色.此外,我应该能够控制涟漪效果的颜色. 我尝 ...
css 实现涟漪效果
css实现涟漪效果最近写小程序直播,需要一个闪动的涟漪效果,很简单的效果代码及思路如下 html代码: <view class="circle"> <view ...
css 实现app图标样式_界面按钮样式丑？不可能！16款css实现炫酷按钮
今天跟大家分享与CSS3按钮相关的特效展示案例,这些例子特效主要由CSS3编写出来,除了新鲜有创意之外,编写代码质量也很高,对于前端人员或设计师都有参考的价值,当然有的不是全CSS3编写的,部分是需要 ...
animate.css动画抖动,Animate.css抖动效果每次都不工作
我正在制作一个Twitch Streamer应用程序,该应用程序使用Twitch API为一组预定义的拖放器提取一些数据.Animate.css抖动效果每次都不工作我有三个按钮来选择所有/在线/离线 ...
css 涟漪,CSS3水波涟漪动画定位样式如何制作
CSS3水波涟漪动画定位样式如何制作宝剑锋从磨砺出,梅花香自苦寒来.以下是小编为大家搜索整理的'CSS3水波涟漪动画定位样式如何制作,希望能给大家带来帮助!更多精彩内容请及时关注我们应届毕业生考试网 ...
css 回到首页按钮,js+css实现回到顶部按钮（back to top）
本文实例介绍了js+css实现回到顶部按钮的方法,分享给大家供大家参考,具体内容如下效果 html css p#back-to-top{ position:fixed; bottom:100px; ...
css涟漪光圈扩散_CSS3动画之：水波涟漪般的定位样式
CSS3动画之:水波涟漪般的定位样式 Sponsor 近期工作要做一个用于图像定位的标识,为了让这个指示标识不死板,决定做个简单的动画,动画效果像波浪一样波动,这样标识就更美观好看了,喜欢的同学可以跟 ...
CSS 霓虹灯效果（一）
1.动画--霓虹灯本期我们要实现一个开关控制的霓虹灯,难度系数2.5 该动画使用纯css实现,没有使用js. 通过渐变背景色技术,模拟金属拉丝的按钮,用投影技术实现霓虹灯效果.用:check和兄弟选 ...

CSS-涟漪效果的按钮

CSS-涟漪效果的按钮相关推荐

最新文章

热门文章