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

发布：2020/11/26 9:03:06作者：管理员来源：本站浏览次数：1299

/*点击按钮时，按钮背景显示波纹效果*/
        .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="http://www.htmleaf.com/templets/default/images/Qkhtml2-1100-90.jpg" ></span>

        </div>
    </div>

　jquery 页面滚动到指定位置

waves 波纹　

css3按钮波纹效果按钮动画 - 波纹效果点击按钮时，按钮背景显示波纹效果

柏港建站平台

柏港 CSS

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

柏港为您推荐了一些相关资讯