css-点击按钮实现水滴动画
平常在使用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提供的函数属性值修改
//地址：https://developer.mozilla.org/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属性
//地址：http://www.runoob.com/jsref/met-cssstyle-setproperty.html
上一篇：
IDEA上Java项目控制台中文乱码