代码如下所示:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .btn{ display: block; width: 300px; height: 100px; margin: 50px; outline: 0; overflow: hidden; position: relative; transition: .3s; cursor: pointer; user-select: none; text-align: center; line-height: 100px; font-size: 50px; background: tomato; color: #fff; border-radius: 10px; } .btn>span{ position: absolute; left: 0; top: 0; width: 100%; height: 100%;} .btn>span:after{ content: ''; position: absolute; background: transparent; border-radius:50%; width: 100%; padding-top: 100%; margin-left: -50%; margin-top: -50%; left: var(--x,-100%); top: var(--y,-100%); } .btn:active{ background: orangered; } .btn>input[type=checkbox]{ display: none } .btn>input[type=checkbox]+span:after{ animation: ripple-in 1s; } .btn>input[type=checkbox]:checked+span:after{ animation: ripple-out 1s; } @keyframes ripple-in{ from { transform: scale(0); background: rgba(0,0,0,.25) } to { transform: scale(1.5); background: transparent } } @keyframes ripple-out{ from { transform: scale(0); background: rgba(0,0,0,.25) } to { transform: scale(1.5); background: transparent } } </style> </head> <body> <label class="btn" tabindex="1"> <input type="checkbox"><span onclick="ripple(this,event)">button</span> </label> </body> <script> function ripple(dom,ev){ console.log(ev) var x = ev.offsetX; var y = ev.offsetY; dom.style.setProperty('--x',x+'px'); dom.style.setProperty('--y',y+'px'); } </script> </html>
到此这篇关于CSS+JS实现水滴涟漪动画按钮效果的示例代码的文章就介绍到这了,更多相关css水滴涟漪动画按钮内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!
em是何物? em指字体高,任意浏览器的默认字体高都是16px。所以未经调整的浏览器...
大家好,我是民工哥。 一提到监控系统,大家很快就能想到 Zabbix 、 Prometheu s...
首先提示,处于安全的需要JavaScript不能直接访问本地资源文件,那怎么办呢?下...
1. 给logo添加替代文本 这样有两个好处:屏幕阅读器能识别logo图片代表的含义,...
创业公司常常能给我们带来惊喜,不拘一格的工作方式,别开生面的商业模式,独树...
最近在开发中遇到的需求是:微信扫描课件二维码,播放其对应的课件视频 设计流程...
复制代码 代码如下: html !--混合框架的布局: 要想实现复杂的页面布局,只需在f...
一、前言 在了解加密原理前,我们来看看这样一个故事。 小红和小明是情侣,一天...
用什么代码实现?不允许有白色底色产生,因为手机高度不一样 设计图要标准(750...
问题描述 按钮样式为图标+文字,在使用flex布局写垂直居中时,iphone7手机上文字...