用CSS3動畫特效實現彈窗效果

DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS特效代碼 >> 用CSS3動畫特效實現彈窗效果

用CSS3動畫特效實現彈窗效果

編輯：CSS特效代碼

提示：如果大家覺得本篇實現的彈窗效果有用，可持續關注。接下會添加更多效果並且封裝成插件，這樣使用就方便了。

CSS3特殊效果

CSS3為用戶添加了三個特殊效果的處理方式：過渡、動畫、變化。當用戶和界面元素交互時，使用這些特殊樣式可大大改善用戶的體驗效果。這些效果直接由浏覽器引擎處理，可以節省開銷。盡管如此，它們也會耗費大量的處理能力，尤其是一些復雜的WEB頁面上。即使是最基本的效果，也是如此。本篇的目的只是熟悉下這三種CSS處理效果，不推薦在實際系統中大篇幅使用。

溫馨提示：請謹慎大篇幅使用這些特殊效果。

另外一方面，由於在CCS3標准化之前，主流浏覽器都是通過添加廠商前綴方式提供樣式支持。所以要解決浏覽器兼容問題，使用這些樣式，我們不得不為每一個樣式添加各個產商前綴，例如添加一個過度延遲屬性transition-delay，不得不這樣寫：

-webkit-transition-delay: 300ms;
-o-transition-delay: 300ms;
-moz-transition-delay: 300ms;
-ms-transition-delay: 300ms;
transition-delay: 300ms;

代碼量增加，不利於閱讀。

最終效果

先看看最終實現的效果：

dialog

效果比較簡單，包括以下幾點：

窗口透明度發生變化,從最初的0漸變到1。

窗口位置從浏覽器底部漸變到浏覽器居中位置。

窗口有一個90度的翻轉效果。

窗口有遮擋層，彈窗時，遮擋層透明度從0漸變到0.7。

窗口關閉時所有動畫反向執行。

彈窗布局

首先實現彈出窗口樣式，彈窗在浏覽器可見窗口顯示，所有需要設置position為fixed。窗口容器樣式如下：

.dialog-root{
            position: fixed;
            z-index: 2000;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

直接設置left和top為50%可讓元素左上角原點在浏覽器居中，但是我們要以窗口的中心位置作為原點，使用CSS變換特效(transform)的平移translate函數可達到目的。這裡補充下變換效果有哪些函數：

translate(x, y)（長度值或者百分比）：在水平方向、垂直方向平移元素。

translateX(value)：水平方向平移。

translateY(value)：垂直方向平移。

scale(x, y)、scaleX(value)、scaleY(value)：在水平方向、垂直方向或者兩個方向上縮放元素。

rotate()、rotateX()、rotateY()、rotateZ()：rotate支持3D效果，可在x、y、z軸上旋轉元素。

skew()、skewX()、skewY()：在水平方向、垂直方向或者兩個方向傾斜一定的角度。

窗口布局完整樣式：

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

        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;

            opacity: 0.7;
        }
        /* 彈窗布局樣式 */
        .dialog-root{
            position: fixed;
            z-index: 2000;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
        /* 彈窗容器 */
        .dialog-wrapper{
            background: #E74C3C;
            width: 635px;
            height: 375px;
            overflow: hidden;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
        }
        /* 彈窗標題 */
        .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;
        }
    </style>
</head>
<body>
    <div id="dialog-face" class="dialog-face">
    </div>
    <div id="dialog" class="dialog-root">
        <div id="dialog-wrapper" class="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>關閉</button>
            </div>
        </div>
    </div>
</body>
</html>

效果如下：

動畫實現

先看看CSS3為我們提供了的動畫屬性：

animation-delay：設置動畫開始前的延遲時間。

animation-direction：設置動畫循環播放的時候是否方向播放，包含normal和alternate兩個值。

animation-duration：設置動畫播放持續的時間。

animation-interacion-count：設置動畫的播放次數，可以為具體數據或者無限循環關鍵字infinite。

animation-name：指定動畫名稱。

animation-play-state：允許動畫暫停和重新播放，包含running、paused。

animation-timing-function：指定如何計算中間動畫值，

CSS3動畫為我們提供了關鍵幀設置，我們可以按百分比設置動畫。首先彈窗是從窗口底部向上平移到中間位置。設置的關鍵幀如下：

       @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);
            }
        }

上面就是關鍵幀的定義代碼，dialogSlipToBottom和dialogSlipToUp是關鍵幀名稱，元素類可通過animation-name屬性使用。dialogSlipToUp是彈窗時的動畫效果，透明度從0.3漸變到1並且元素從浏覽器底部位置漸變到居中位置。在關閉窗口時使用dialogSlipToBottom作為動畫，效果和dialogSlipToUp反向，另外，還使用了變換效果的tranlate函數，因為窗口的中心點在窗口中心，移到窗口底部時有1/2的高度沒有隱藏掉，所以使用translate(-50%, 0)讓中心點移到頂部，這樣整個窗口就可以完全隱藏了。

彈窗有一個3D旋轉效果，使用CSS3的3D動畫，我們必須選擇一個容器作為透視容器，只有在這個容器中設置動畫才有效。通過添加perspective屬性設置容器為透視容器，我們把dialog-root作為3D動畫容器，樣式如下：

.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;
}

通過perspective屬性設置透視容器透視舉例為1300像素，另外動畫的周期（animation-duration）為500毫秒。

彈窗的旋轉實現是從浏覽器由內向外90度旋轉，設置transform-origin: 50% 100%，讓窗口以底線作為旋轉軸。旋轉容器樣式如下：

.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;
        }

添加彈出或關閉窗口函數函數：toggleDialog，傳入一個布爾值，true表示彈窗，false表示關閉窗口。代碼如下：

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);
}

完整代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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>

如果本篇內容對大家有幫助，請點擊頁面右下角的關注。如果覺得不好，也歡迎拍磚。你們的評價就是博主的動力！下篇內容，敬請期待！

上一頁:css3彈性盒模型（Flexbox）
下一頁:CSS布局基礎——BFC

CSS特效代碼

淺談css的柵格布局: 柵格布局想必大家都很了解，我們做頁面開發的時候，往往對頁面板式的要求很高，如何對各個區域的內容排版，
CSS絕對定位的盒子水平垂直居中顯示: 如果沒有絕對定位，只需要 margin: 0 auto盒子即可實現水平垂直居中
過長文字自動換行的技巧 Word-Break Word-Wrap: 在很多時候，為了防止內容過長把表格或容器撐破，我們都需要為容器加上自動換行的功能。實現自動換行，

CSS基礎知識 Sass教程 CSS3基礎關於CSS CSS進階教程 DIV十CSS布局 CSS特效代碼 CSS詳解

小編推薦

Css3 - 元素不停的旋轉 CSS選擇器介紹 css3寬度大於或小於@media max-width min-width CSS3 skew傾斜、rotate旋轉動畫 CSS 設置placeholder屬性值和樣式不用bootstrap，只用CSS創建網格布局 nth-child和:nth-of-type的區別 css3 3d展示中rotate（）介紹與簡單實現移除行塊級元素之間的空格 HTML5和CSS3基礎教程(第8版）-讀書筆記(3)

DIV CSS 佈局教程網

CSS3特殊效果

最終效果

彈窗布局

動畫實現

完整代碼

相關文章