位置：广州松河 > 技术支持 > 点击按钮时，按钮背景显示波纹效果

点击按钮时，按钮背景显示波纹效果

来源：网络整理时间：2023/2/14 0:42:33 共 3689 浏览

/*点击按钮时，按钮背景显示波纹效果*/
        .ripple {
            position: relative;
            /*隐藏溢出的径向渐变背景*/
            overflow: hidden;
        }
            .ripple:after {
                content: "";
                display: block;
                position: absolute;
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
                pointer-events: none;
                /*设置径向渐变*/
                background-image: radial-gradient(circle, #666 10%, transparent 10.01%);
                background-repeat: no-repeat;
                background-position: 50%;
                transform: scale(10, 10);
                opacity: 0;
                transition: transform .3s, opacity .5s;
            }

            .ripple:active:after {
                transform: scale(0, 0);
                opacity: .3;
                /*设置初始状态*/
                transition: 0s;

}

<div class="row">
        <div class="container text-center">
            <button class="btn ripple btn-lg">Button</button>
            <button class="btn ripple btn-lg">Button with very long content</button>
            <span class="ripple"><img width="292" height="182" src="Qkhtml2-1100-90.jpg" ></span>

        </div>
    </div>

版权说明：
本网站凡注明“广州松河原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：waves 波纹 | ·下一条：jquery 页面滚动到指定位置