DIV CSS 佈局教程網

 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>

    效果如下:

image

動畫實現

    先看看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>

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

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved