Click the button to drop css- achieve animation

Usually in the use of APP, when the user clicks a button, the button will be the effect of water droplets appear, when the native APP developed, will provide animation, if you want the PC side or when H5 achieve this effect, you can find some related libraries for development, but for one little interaction and the introduction of external JS and CSS, always feel is not worth your own if css + js for development, and development would be likely to experience more convenient.

A, 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提供的函数属性值修改
//地址：https://developer.mozilla.org/zh-CN/docs/Web/CSS/var

Two, HTML

<body>
	<label class="btn" tabindex="1">
        <input type="checkbox">
        <span onclick="ripple(this,event)">这是一个可点击区域</span>
    </label>
</body>

Three, 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属性
//地址：http://www.runoob.com/jsref/met-cssstyle-setproperty.html

Non-original content, just copy the original code, there is a button to be optimized packaging, and the layout and style of the modified structure.
Article author Address: https://segmentfault.com/a/1190000016758776

Click the button to drop css- achieve animation

Guess you like