感谢您阅读我的博客，如果您现在工作、学习累了或者疲惫了，不妨聆听一下音乐，它能够减轻你的疲劳，还能够带给您一种舒适愉悦的心情。如果您认为这篇文章还不错或者有所收获，您可以在页面 右侧和底部 扫描二维码 打赏我，您的鼓励是我继续写作、分享的最大动力！

CSS-水纹按钮实例 

<!DOCTYPE html>

<html>
<head><title>水纹按钮实例</title></head>
<style type="text/css">
     /* 按钮反馈之波纹 */
    .ripple {
        position: relative;
        /* overflow:hidden */  /*打开注释及效果不扩散在外*/
    }
    .ripple:focus{
        outline: none;
    }

    .ripple:after {
        content: "";
        display: block;
        position: absolute;
        top: -10px;
        left: -10px;
        right: -10px;
        bottom: -10px;
        pointer-events: none;
        background-color: #888;
        background-repeat: no-repeat;
        background-position: 50%;
        opacity: 0;
        transition: all .3s;
    }

    .ripple:active:after {
        opacity: .3;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        transition: 0s;
    }
/* 按钮反馈之波纹 */
</style>

<body>
<button class="ripple">我是水纹按钮</button>
</body>
</html>

 

posted @ 2021-12-13 15:28  Love In Winter  阅读(45)  评论(0)  编辑  收藏  举报
作者： LifeDecidesHappiness
出处： http://www.cnblogs.com/LifeDecidesHappiness/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，否则保留追究法律责任的权利，且在文章页面明显位置给出原文连接，如有问题，可以通过以下邮箱地址 2468881301@qq.com  联系我，非常感谢。
踏实做一个为人民服务的搬运工！
如果您认为这篇文章还不错或者有所收获，您可以通过右边的“打赏”功能,您的支持和鼓励是我继续写作、分享的最大动力！
点击关注不迷路，让我带你上高速！