使用css实现逼真的水波纹点击效果
时间: 2023-09-05 20:11:06 浏览: 135
使用CSS实现逼真的水波纹点击效果
5星 · 资源好评率100%
要实现逼真的水波纹点击效果,可以使用CSS3的transition和animation属性。
首先,在HTML中创建一个div元素,并设置其样式为圆形:
```html
<div class="circle"></div>
```
接下来,在CSS中定义.circle的样式,包括宽度、高度、背景颜色和圆角:
```css
.circle {
width: 100px;
height: 100px;
background-color: #008cba;
border-radius: 50%;
}
```
然后,添加一个:active伪类,当用户点击div时触发,同时设置transition属性,使其平滑地过渡到新的样式。在这里,我们将背景颜色透明度降低到0.6:
```css
.circle:active {
transition: background-color 0.3s ease, opacity 1s ease;
background-color: rgba(0, 140, 186, 0.6);
}
```
最后,使用CSS3的animation属性实现水波纹效果。定义一个伪元素:before,设置其样式为圆形,并将其位置设置在div的中心。然后,使用animation属性设置动画效果,将其透明度从1降低到0,并将其大小从0逐渐扩大到200px。
```css
.circle:active:before {
content: "";
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 0;
height: 0;
border-radius: 50%;
background-color: rgba(0, 140, 186, 0.6);
animation: ripple 1s linear;
}
@keyframes ripple {
0% {
opacity: 1;
width: 0;
height: 0;
}
100% {
opacity: 0;
width: 200px;
height: 200px;
}
}
```
完整的代码如下:
```html
<div class="circle"></div>
```
```css
.circle {
width: 100px;
height: 100px;
background-color: #008cba;
border-radius: 50%;
}
.circle:active {
transition: background-color 0.3s ease, opacity 1s ease;
background-color: rgba(0, 140, 186, 0.6);
}
.circle:active:before {
content: "";
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 0;
height: 0;
border-radius: 50%;
background-color: rgba(0, 140, 186, 0.6);
animation: ripple 1s linear;
}
@keyframes ripple {
0% {
opacity: 1;
width: 0;
height: 0;
}
100% {
opacity: 0;
width: 200px;
height: 200px;
}
}
```
阅读全文