css3水波纹动画

CSS3水波纹动画让网页呈现出更加生动的效果，让用户体验更加丰富。下面是一段CSS3水波纹动画相关的代码：

.button {
    position: relative;
    display: inline-block;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    background-color: #009adb;
    border-radius: 25px;
    overflow: hidden;
}
.button:hover {
    background-color: #0077c0;
}
.button:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}
.button:active:after {
    width: 200px;
    height: 200px;
    margin-left: -100px;
    margin-top: -100px;
    animation: ripple 1s linear;
}
@keyframes ripple {
to {
    opacity: 0;
    transform: scale(2);
}
}
    

上述代码实现了一个水波纹动画效果的按钮，当用户点击按钮时，按钮中心会出现一个白色的圆形水波纹，然后逐渐变淡，最终消失。这个动画效果使用了CSS3的伪元素（:after）和关键帧动画（@keyframes）实现。

在实现CSS3水波纹动画时，需要注意以下几点：

• 使用伪元素（:after）实现水波纹效果。
• 设置伪元素的初始状态（width和height为0）以及点击状态（width和height为200px）、位置（使用transform实现居中）、背景色（使用rgba控制透明度）等属性。
• 使用关键帧动画实现水波纹动画效果，通过改变伪元素的opacity和transform属性，实现水波纹从中心向外扩散、越来越透明、最终消失的效果。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！