隐藏

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

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

/*点击按钮时,按钮背景显示波纹效果*/
        .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>