使用css实现逼真的水波纹点击效果
时间: 2023-05-14 20:02:52 浏览: 100
想要使用CSS实现逼真的水波纹点击效果,可以使用CSS伪类:hover和transform属性来实现。
首先,在html中添加一个div元素,将其设置为圆形,并添加一个类名wave:
<div class="wave"></div>
然后在CSS中,给wave类设置背景颜色和圆角属性,使其呈圆形状态。将其设置为relative定位,并设置宽高为100px。
接下来,使用伪类:hover来实现鼠标悬浮时的水波纹效果。给wave类设置:before伪元素,将其设置为绝对定位,并设置宽高为0。添加transition属性,让其变化平滑。同时,将鼠标移动的位置坐标传入:before伪元素的transform属性中,实现水波纹效果。
最后,通过box-shadow属性来显示水波纹的颜色,效果更加逼真。
完整的代码如下:
html代码:
<div class="wave"></div>
css代码:
.wave {
width: 100px;
height: 100px;
background-color: #69c;
border-radius: 50%;
position: relative;
}
.wave:before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
background-color: rgba(255, 255, 255, 0.5);
border-radius: 50%;
transition: all 0.5s ease;
}
.wave:hover:before {
width: 100px;
height: 100px;
transform: translate(-50%, -50%);
border-radius: 50%;
box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.3);
}