平常在使用APP的时候，当用户点击某个按钮的时候，按钮会出现水滴的效果，原生APP开发的时候，会提供相关的动画，如果在PC端或者H5的时候想实现这个效果，也可以找一些相关的库来进行开发，但是为了某一个小小的交互而引入外部的JS和CSS，始终感觉不划算，自己如果用css+js来进行开发，可能体验和开发会更加方便。
一、CSS
<style>.btn {display: block;width: 300px;height: 100px;line-height: 100px;outline: 0;overflow: hidden;position: relative;transition: .3s;text-align: center;cursor: pointer;user-select: none;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: '';background: transparent;border-radius: 50%;width: 100%;padding-top: 100%;position: absolute;margin-left: -50%;margin-top: -50%;left: var(--x, -100%);top: var(--y, -100%);}.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 {0% {transform: scale(0);background: rgba(0, 0, 0, .25)}100% {transform: scale(1.5);background: transparent}}@keyframes ripple-out {0% {transform: scale(0);background: rgba(0, 0, 0, .25)}100% {transform: scale(1.5);background: transparent}}</style>//tip：var()是CSS3提供的函数属性值修改//地址：/zh-CN/docs/Web/CSS/var
二、HTML
<body><label class="btn" tabindex="1"><input type="checkbox"><span onclick="ripple(this,event)">这是一个可点击区域</span></label></body>
三、js
//获取当前用户点击的位置，然后从当前点击的位置进行放大<script>function ripple(dom, ev) {var x = ev.offsetX;var y = ev.offsetY;dom.style.setProperty('--x', x + 'px');dom.style.setProperty('--y', y + 'px');}</script>//setProperty()用来从新设置一个新的CSS属性//地址：/jsref/met-cssstyle-setproperty.html
内容非原创，只是把原有的代码进行copy了，目前需要优化的就是按钮的封装，以及结构的布局以及样式修改。
原作者文章地址：/a/1190000016758776
