[分享]css3按钮点击阴影波浪

CSS3按钮点击阴影波浪是一种常见的效果，它可以让按钮在被点击时产生一个类似水波纹的效果，使得用户交互更加自然舒适。.button { : relative; display: inlineblock...

CSS3按钮点击阴影波浪是一种常见的效果，它可以让按钮在被点击时产生一个类似水波纹的效果，使得用户交互更加自然舒适。

.button {
    position: relative;
    display: inline-block;
    padding: 12px 24px;
    background-color: #1e87f0;
    color: #fff;
    text-align: center;
    font-size: 16px;
    cursor: pointer;
    border-radius: 4px;
    transition: all ease-out .2s;
}

.button:hover {
    background-color: #147dd9;
}

.button::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(255, 255, 255, .4);
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    width: 0;
    height: 0;
}

.button:active::before {
    width: 150%;
    height: 150%;
    opacity: 1;
    transition: all ease-out .2s;
} 

以上是一个简单的CSS代码，实现按钮点击阴影波浪效果。在CSS3中，我们可以使用伪元素:before和:after来模拟出一些新的效果。在这段代码中，我们使用了:before伪元素来模拟出一个圆形的阴影效果，并设置了初始的宽度和高度都为0，透明度为0，以及pointer-events:none禁止点击事件传递。

当按钮被点击(active状态)时，利用CSS3的transition过渡特效，将按钮的:before伪元素的宽度和高度都放大为原先的1.5倍，并且透明度变为1，就产生了波浪的效果。这种效果不但能够提高用户体验，还可以增加网页的美观程度。