[分享]css3按钮点击消失

CSS3可以实现很多酷炫的效果，比如按钮点击消失。点击我就消失 我们可以先设置按钮的样式，在按钮被点击时使用CSS3实现消失的效果。 .disappearbtn { width: 120px; hei...

CSS3可以实现很多酷炫的效果，比如按钮点击消失。

<button class="disappear-btn">点击我就消失</button> 

我们可以先设置按钮的样式，在按钮被点击时使用CSS3实现消失的效果。

<style>
    .disappear-btn {
        width: 120px;
        height: 50px;
        background-color: #0070c9;
        color: #fff;
        border: none;
        border-radius: 25px;
    }
    .disappear-btn:active {
        animation: disappear 1s;
        animation-fill-mode: forwards;
    }
    @keyframes disappear {
        0% {
            opacity: 1;
        }
        100% {
            opacity: 0;
            display: none;
        }
    }
</style> 

在样式中，我们定义了一个名为“disappear-btn”的类，设置了按钮的样式，包括尺寸、背景色、字体颜色和圆角边框。我们还定义了一个伪类“:active”，当按钮被点击时，消失动画就会触发。

在“:active”伪类中，我们使用了CSS动画（animation），命名为“disappear”，设置持续时间为1秒。在动画的最后一帧，我们将透明度（opacity）设为0，同时将按钮的显示（display）设置为“none”，按钮就会消失了。

这样，我们就成功地实现了按钮点击消失的效果。