帮助中心

立体弹窗效果

浏览：995次- 评论：0次- 发布时间：2017-03-10

Html

Css

Avgrund
  
        A modal concept with a visible level of depth between the page and modal layers. Click a button below to give it a try.
    
    
    
    
        Uses CSS transforms to scale components and CSS filters to blur the page.
    
    
        Avgrund is Swedish for abyss.
    


That's all, folks
    
        You can hit ESC or click outside to close the modal. Give it a go to see the reverse transition.

* {
  margin: 0;
    padding: 0;
}

html, 
body {
    height: 100%;
    overflow: hidden;
}

html {
    background-color: #222;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAGklEQVQIW2NkYGD4D8SMQAwGcAY2AbBKDBUAVuYCBQPd34sAAAAASUVORK5CYII=);
    background-repeat: repeat;
}

h1, 
h2 {
    font-size: 24px;
}

p {
    margin: 10px 0 10px 0;
    font-size: 16px;
    line-height: 1.32;
}

a {
    color: #7aa76d;
    text-decoration: none;

-webkit-transition: 0.15s color ease;
       -moz-transition: 0.15s color ease;
        -ms-transition: 0.15s color ease;
         -o-transition: 0.15s color ease;
            transition: 0.15s color ease;
}
    a:hover {
        color: #91cd85;
    }

small {
    display: block;
    margin-top: 15px;
    padding-top: 15px;
    color: #333;
    font-size: 0.85em;
    border-top: 1px dashed #ccc;

-webkit-text-size-adjust: none;
}

button {
    border: 0px;
    padding: 8px 10px;
    margin: 5px 0px;
    border-radius: 1px;
  outline: 0;

cursor: pointer;
    color: #fff;
    background: #7aa76d;
    font-size: 15px;

-webkit-transition: 0.15s background ease;
       -moz-transition: 0.15s background ease;
        -ms-transition: 0.15s background ease;
         -o-transition: 0.15s background ease;
            transition: 0.15s background ease;
}
    button:hover {
        background: #91cd85;
    }
    button:active {
        background: #60895a;
    }
    button+button {
        margin-left: 5px;
    }

.sharing {
    margin-top: 50px;
}

body {
    background: #fff;

font-family: 'Lato', Helvetica, sans-serif;
    font-size: 16px;
    color: #222;
}
    .avgrund-active body {
        -webkit-transform: scale( 0.9 );
           -moz-transform: scale( 0.9 );
            -ms-transform: scale( 0.9 );
             -o-transform: scale( 0.9 );
                transform: scale( 0.9 );
    }

.avgrund-cover {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
    visibility: hidden;
    opacity: 0;
    background: rgba( 0, 0, 0, 0.5 );
}
    .avgrund-active .avgrund-cover {
        visibility: visible;
        opacity: 1;
    }

.avgrund-contents {
    position: relative;
    padding: 20px;
    max-width: 400px;
    height: 100%;
    margin: auto;
}
    .avgrund-active .avgrund-contents {
        -webkit-filter: blur(2px);
           -moz-filter: blur(2px);
            -ms-filter: blur(2px);
             -o-filter: blur(2px);
                filter: blur(2px);
    }
    .no-blur.avgrund-active .avgrund-contents {
        -webkit-filter: none;
           -moz-filter: none;
            -ms-filter: none;
             -o-filter: none;
                filter: none;
    }

.avgrund-popup {
    position: absolute;
    width: 340px;
    height: 130px;
    left: 50%;
    top: 50%;
    margin: -130px 0 0 -190px;
    visibility: hidden;
    opacity: 0;
    z-index: 2;
    padding: 20px;

background: white;
    box-shadow: 0px 0px 20px rgba( 0, 0, 0, 0.6 );
    border-radius: 3px;

-webkit-transform: scale( 0.8 );
       -moz-transform: scale( 0.8 );
        -ms-transform: scale( 0.8 );
         -o-transform: scale( 0.8 );
            transform: scale( 0.8 );
}
    .avgrund-active .avgrund-popup {
        visibility: visible;
        opacity: 1;

-webkit-transform: scale( 1.1 );
           -moz-transform: scale( 1.1 );
            -ms-transform: scale( 1.1 );
             -o-transform: scale( 1.1 );
                transform: scale( 1.1 );
    }
    .avgrund-popup.stack {
        -webkit-transform: scale( 1.5 );
           -moz-transform: scale( 1.5 );
            -ms-transform: scale( 1.5 );
             -o-transform: scale( 1.5 );
                transform: scale( 1.5 );
    }
    .avgrund-active .avgrund-popup.stack {
        -webkit-transform: scale( 1.1 );
           -moz-transform: scale( 1.1 );
            -ms-transform: scale( 1.1 );
             -o-transform: scale( 1.1 );
                transform: scale( 1.1 );
    }

.avgrund-ready body,
.avgrund-ready .avgrund-contents,
.avgrund-ready .avgrund-popup,
.avgrund-ready .avgrund-cover {
    -webkit-transform-origin: 50% 50%;
       -moz-transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
         -o-transform-origin: 50% 50%;
            transform-origin: 50% 50%;

-webkit-transition: 0.3s all cubic-bezier(0.250, 0.460, 0.450, 0.940);
       -moz-transition: 0.3s all cubic-bezier(0.250, 0.460, 0.450, 0.940);
        -ms-transition: 0.3s all cubic-bezier(0.250, 0.460, 0.450, 0.940);
         -o-transition: 0.3s all cubic-bezier(0.250, 0.460, 0.450, 0.940);
            transition: 0.3s all cubic-bezier(0.250, 0.460, 0.450, 0.940);
}
.avgrund-ready .avgrund-popup.no-transition {
    -webkit-transition: none;
       -moz-transition: none;
        -ms-transition: none;
         -o-transition: none;
            transition: none;
}

(function(){

var container = document.documentElement,
        popup = document.querySelector( '.avgrund-popup' ),
        cover = document.querySelector( '.avgrund-cover' ),
        currentState = null;

addClass( container, 'avgrund-ready' );

// Deactivate on ESC
    function onDocumentKeyUp( event ) {
        if( event.keyCode === 27 ) {
            deactivate();
        }
    }

// Deactivate on click outside
    function onDocumentClick( event ) {
        if( event.target === cover ) {
            deactivate();
        }
    }

function activate( state ) {
        document.addEventListener( 'keyup', onDocumentKeyUp, false );
        document.addEventListener( 'click', onDocumentClick, false );

removeClass( popup, currentState );
        addClass( popup, 'no-transition' );
        addClass( popup, state );

setTimeout( function() {
            removeClass( popup, 'no-transition' );
            addClass( container, 'avgrund-active' );
        }, 0 );

currentState = state;
    }

function deactivate() {
        document.removeEventListener( 'keyup', onDocumentKeyUp, false );
        document.removeEventListener( 'click', onDocumentClick, false );

removeClass( container, 'avgrund-active' );
    }

function disableBlur() {
        addClass( document.documentElement, 'no-blur' );
    }

function addClass( element, name ) {
        element.className = element.className.replace( /\s+$/gi, '' ) + ' ' + name;
    }

function removeClass( element, name ) {
        element.className = element.className.replace( name, '' );
    }

window.avgrund = {
        activate: activate,
        deactivate: deactivate,
        disableBlur: disableBlur
    }

})();

↑上面代码改变，会自动显示代码结果

jQuery调用版本：1.11.3

立即下载收藏

积分说明：注册即送10牛币，每日签到可获得5牛币，成为VIP会员可永久免牛币下载！充值积分充值会员更多说明»

代码描述：模态窗口配合深度的视觉效果让整个界面有立体感。

立体弹窗效果。这个作品的作者是 Hakim，他在 CodePen 上面有很多很多的好作品，很难选择出最好的一个。我挑选这个的原因是因为这个效果很实用。模态窗口配合深度的视觉效果让整个界面特别有立体感。

讨论这个常用代码（0）回答他人问题或分享心得会奖励牛币

〒_〒居然一个评论都没有……

文明上网，理性发言！ 😉 阿里云幸运券，戳我领取

我的积分余额：0 已下载次数：995

所需牛币：5 开始下载

牛币获取：签到、评论、充值 » 在线充值（10牛币=1元）

成为VIP可永久免积分下载全部常用代码 » 查看详情