用CSS3动画特效实现弹窗效果

发布时间:2018-10-11 23:03:51编辑:丝画阁阅读(497)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta>
    <title>CSS特殊效果</title>
    <style tpe="text/css">
        /* ---------------------公共样式 -------------------*/
        body{
            background: #000;
        }

        .none{
            display: none;
        }

        .layout-root{
            position: fixed;
            background: #E74C3C;
            height: 100%;
            width: 100%;
            z-index: 1000;
            top: 0;
            left: 0;
        }

        .layout-content{
            line-height: 44px;
            font-weight: 300;
            font-size: 1em;
            color: #fff;
            text-indent: 10px;
        }

        .layout-content .code{
            line-height: 22px;
            text-align: center;
        }

        p {
            display: block;
            -webkit-margin-before: 1em;
            -webkit-margin-after: 1em;
            -webkit-margin-start: 0px;
            -webkit-margin-end: 0px;
        }

        a, button{
            outline: none;
        }

        button {
            border: none;
            padding: 0.6em 1.2em;
            background: #c0392b;
            color: #fff;
            font-size: 1em;
            cursor: pointer;
            display: block;
            margin: 3px auto;
            border-radius: 2px;
        }

        button:hover, button:active, button:focus{
            border: none;
        }

        /* ---------------------弹窗样式 -------------------*/
        .dialog-face{
            position: fixed;
            background: #A02418;
            height: 100%;
            width: 100%;
            z-index: 1000;
            top: 0;
            left: 0;

            -webkit-animation-duration: 500ms;
            -moz-animation-duration:500ms;
            -o-animation-duration:500ms;
            animation-duration: 500ms;
        }

        .dialog-face.slipBottom[opacity="0"]{
            display: none;
        }

        .dialog-face.slipUp{
            opacity: 0.7;
            -webkit-animation-name: dialogFaceSlipToUp;
            -moz-animation-name: dialogFaceSlipToUp;
            -o-animation-name: dialogFaceSlipToUp;
            animation-name: dialogFaceSlipToUp;
        }

        .dialog-face.slipBottom{
            opacity: 0;
            visibility: hidden;
            -webkit-animation-name: dialogFaceSlipToBottom;
            -moz-animation-name: dialogFaceSlipToBottom;
            -o-animation-name: dialogFaceSlipToBottom;
            animation-name: dialogFaceSlipToBottom;
        }

        .dialog-root{
            position: fixed;
            z-index: 2000;
            left: 50%;

            -webkit-animation-duration: 500ms;
            -moz-animation-duration: 500ms;
            -o-animation-duration: 500ms;
            animation-duration: 500ms;
            -webkit-perspective: 1300px;
            -moz-perspective: 1300px;
            perspective: 1300px;
        }

        .dialog-root.slipUp{
            top: 50%;
            opacity: 1;

            -webkit-animation-name: dialogSlipToUp;
            -moz-animation-name: dialogSlipToUp;
            -o-animation-name: dialogSlipToUp;
            animation-name: dialogSlipToUp;
            -webkit-transform: translate(-50%, -50%);
            -o-transform: translate(-50%, -50%);
            -moz-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
        }

        .dialog-root.slipBottom{
            top: 100%;
            opacity: 0.3;
            -webkit-animation-duration: 500ms;
            -moz-animation-duration: 500ms;
            -o-animation-duration: 500ms;
            animation-duration: 500ms;
            -webkit-animation-name: dialogSlipToBottom;
            -moz-animation-name: dialogSlipToBottom;
            -o-animation-name: dialogSlipToBottom;
            animation-name: dialogSlipToBottom;
            -webkit-transform: translate(-50%, 0);
            -o-transform: translate(-50%, 0);
            -moz-transform: translate(-50%, 0);
            -ms-transform: translate(-50%, 0);
            transform: translate(-50%, 0);
        }

        .dialog-wrapper{
            background: #E74C3C;
            width: 635px;
            height: 375px;
            overflow: hidden;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;

            -webkit-animation-duration: 500ms;
            -moz-animation-duration: 500ms;
            -o-animation-duration: 500ms;
            animation-duration: 500ms;
            -webkit-transform-origin: 50% 100%;
            -moz-transform-origin: 50% 100%;
            -ms-transform-origin: 50% 100%;
            -o-transform-origin:50% 100%;
            transform-origin: 50% 100%;
        }

        .dialog-wrapper.slipUp{
            -webkit-transform: rotateX(0deg);
            -moz-transform: rotateX(0deg);
            -ms-transform: rotateX(0deg);
            -o-transform: rotateX(0deg);
            transform: rotateX(0deg);
            -webkit-animation-name: contentSlipToUp;
            -moz-animation-name: contentSlipToUp;
            -o-animation-name: contentSlipToUp;
            animation-name: contentSlipToUp;
        }

        .dialog-wrapper.slipBottom{
            -webkit-transform: rotateX(90deg);
            -moz-transform: rotateX(90deg);
            -ms-transform: rotateX(90deg);
            -o-transform: rotateX(90deg);
            transform: rotateX(90deg);
            -webkit-animation-name: contentSlipToBottom;
            -moz-animation-name: contentSlipToBottom;
            -o-animation-name: contentSlipToBottom;
            animation-name: contentSlipToBottom;
        }

        .dialog-header{
            height: 75px;
            background: #d94839;
            text-align: center;
        }

        .dialog-header span{
            font-size: 28px;
            line-height: 75px;
            color:#F6CBC6;
        }

        .dialog-content{
            font-weight: 300;
            font-size: 1.15em;
            color: #fff;
            padding: 15px 40px 20px 40px;
            margin: 0;
        }


        .dialog-content p{
            margin: 0;
            padding: 10px 0;
        }

        .dialog-footer{
        }
        /* ---------------------动画关键帧 -------------------*/

        @keyframes dialogFaceSlipToUp  {
            0%{
               opacity: 0;
            }
            100%{
                opacity: 0.7;
            }
        }
        
        @keyframes dialogFaceSlipToBottom {
            0%{
                opacity: 0.7;
                visibility:visible;
            }
            100%{
                visibility: hidden;
                opacity: 0;
            }
        }

        @keyframes dialogSlipToUp  {
            0%{
                top: 100%;
                opacity: 0.3;
            }
            100%{
                top: 50%;
                opacity: 1;
            }
        }

        @keyframes dialogSlipToBottom  {
            0%{
                top: 50%;
                opacity: 1;
                -webkit-transform: translate(-50%, -50%);
                -moz-transform: translate(-50%, -50%);
                -ms-transform: translate(-50%, -50%);
                -o-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
            }
            100%{
                top: 100%;
                opacity: 0.3;
                -webkit-transform: translate(-50%, 0);
                -moz-transform: translate(-50%, 0);
                -ms-transform: translate(-50%, 0);
                -o-transform: translate(-50%, 0);
                transform: translate(-50%, 0);
            }
        }

        @keyframes contentSlipToUp  {
            0%{
                -webkit-transform: rotateX(90deg);
                -moz-transform: rotateX(90deg);
                -ms-transform: rotateX(90deg);
                -o-transform: rotateX(90deg);
                transform: rotateX(90deg);
            }
            100%{
                -webkit-transform: rotateX(0deg);
                -moz-transform: rotateX(0deg);
                -ms-transform: rotateX(0deg);
                -o-transform: rotateX(0deg);
                transform: rotateX(0deg);
            }
        }

        @keyframes contentSlipToBottom  {
            0%{
                -webkit-transform: rotateX(0deg);
                -moz-transform: rotateX(0deg);
                -ms-transform: rotateX(0deg);
                -o-transform: rotateX(0deg);
                transform: rotateX(0deg);
            }
            60%{
                -webkit-transform: rotateX(60deg);
                -moz-transform: rotateX(60deg);
                -ms-transform: rotateX(60deg);
                -o-transform: rotateX(60deg);
                transform: rotateX(60deg);
            }
            100%{
                -webkit-transform: rotateX(90deg);
                -moz-transform: rotateX(90deg);
                -ms-transform: rotateX(90deg);
                -o-transform: rotateX(90deg);
                transform: rotateX(90deg);
            }
        }
    </style>
</head>
<body>
    <div class="fixed layout-root">
        <div class="layout-content">
            <button onclick="toggleDialog(true)">显示弹出框</button>
        </div>
        <div class="layout-content">
            <p>
                CSS3为用户添加了三个特殊效果的处理方式:过渡、动画、变化。当用户和界面元素交互时,使用这些特殊样式可大大改善用户的体验效果。这些效果可以直接由浏览器引擎处理,还能节省开销。尽管如此,这些效果会耗费大量的处理能力,尤其是一些复杂的WEB页面上。即使是最基本的效果,也是如此。本篇的目的只是熟悉这三种CSS处理效果,不推荐在实际系统中大篇幅使用。

                温馨提示:请谨慎大篇幅使用这些特殊效果。

                另外一方面,由于在CCS3标准化之前,主流浏览器都是通过添加厂商前缀方式提供样式支持。所以要解决浏览器兼容问题,使用这些样式,我们不得不为每一个样式添加各个产商前缀,例如添加一个过度延迟时间属性transition-delay,不得不这样写:

            </p>
            <p class="code">
                -webkit-transition-delay: 300ms;<br>
                -o-transition-delay: 300ms;<br>
                -moz-transition-delay: 300ms;<br>
                -ms-transition-delay: 300ms;<br>
                transition-delay: 300ms;
            </p>
        </div>
    </div>
    <div id="dialog-face" class="none">
    </div>
    <div id="dialog" class="none">
        <div id="dialog-wrapper">
            <div class="dialog-header">
                <span>弹窗效果</span>
            </div>
            <div class="dialog-content">
                <p>This is a modal window. You can do the following things with it:</p>
                <ul>
                    <li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li>
                    <li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li>
                    <li><strong>Close:</strong> click on the button below to close the modal.</li>
                </ul>
            </div>
            <div class="dialog-footer">
                <button onclick="toggleDialog(false)">关闭</button>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        function toggleDialog(show){
            var animationClass = show ? "slipUp" : "slipBottom";
            var animation = function(){
                var ele = document.getElementById("dialog-face");
                ele.className = "dialog-face " + animationClass;
                ele = document.getElementById("dialog");
                ele.className = "dialog-root " + animationClass;
                ele = document.getElementById("dialog-wrapper");
                ele.className = "dialog-wrapper " + animationClass;
            };

            setTimeout(animation, 100);
        }
    </script>
</body>
</html>

关键字