css实现带有景深层次感的弹出层效果代码-html代码-BFW代码库

css实现带有景深层次感的弹出层效果代码

代码语言：html

所属分类：弹出层

代码描述：css实现带有景深层次感的弹出层效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">






    <style>
        * {
            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 );
            tra.........完整代码请登录后点击上方下载按钮下载查看