立体弹窗效果

PROMULGATOR

qq12345643534

浙江省杭州市

← 自定义动态鼠标效果

→ 超炫的HTML5+CSS3进度条

相关代码

简单的注册页面带验证

立体弹窗效果

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

立即下载

立体弹窗效果



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

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

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

取消回复

<!doctype html> <html> <head> <meta charset="utf-8"> <title>立体弹窗效果-jq22.com</title> <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> <style> </style> </head> <body> <script> </script> </body> </html>

2012-2021 jQuery插件库版权所有

jquery插件| jq22工具库| 网页技术| 广告合作| 在线反馈| 版权声明
沪ICP备13043785号-1 浙公网安备 33041102000314号