CSS3 實作側邊欄展開收起動畫-css教學-PHP中文網

這篇文章主要介紹如何使用CSS3 實作側邊欄展開收起動畫，並附上了範例程式碼，非常的詳細，推薦給需要的小夥伴。

@keyframes

規則用於建立動畫。

@keyframes 中規定某項CSS 樣式，就能創建由當前樣式逐漸改為新樣式的動畫效果

@keyframes 中創建動畫時，請把它捆綁到某個選擇器，否則不會產生動畫效果。

透過規定至少以下兩個CSS3 動畫屬性，即可將動畫綁定到選擇器：

規定動畫的名稱
規定動畫的長度
animation
animation 屬性是一個簡寫屬性，用來設定動畫屬性：

animation-name：規定@keyframes 動畫的名稱。
animation-duration：規定動畫完成一個週期所花費的秒或毫秒。預設是 0。
animation-timing-function：規定動畫的速度曲線。預設是 "ease"。
animation-delay：規定動畫何時開始。預設是 0
animation-iteration-count：規定動畫被播放的次數。預設是 1。
animation-direction：規定動畫是否在下一週期逆向播放。預設是 "normal"。
animation-fill-mode：規定物件動畫時間以外的狀態

側邊欄實作

/* 动画定义 */
@-webkit-keyframes move_right {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
        -webkit-transform: translateX(120px);
        transform: translateX(120px);
    }
}
@keyframes move_right {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
        -webkit-transform: translateX(120px);
        transform: translateX(120px);
    }
}
@-webkit-keyframes move_left {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        -webkit-transform: translateX(-120px);
        transform: translateX(-120px);
    }
}
@keyframes move_left {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        -webkit-transform: translateX(-120px);
        transform: translateX(-120px);
    }
}
@-webkit-keyframes move_up {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(-250px);
        transform: translateY(-250px);
    }
}
@keyframes move_up {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(-250px);
        transform: translateY(-250px);
    }
}

登入後複製

/* 动画绑定 */
 .move_right {
     -webkit-animation-name            : move_right;
     animation-name            : move_right;
     -webkit-animation-duration        : 1s;
     animation-duration        : 1s;
     -webkit-animation-iteration-count : 1;
     animation-iteration-count : 1;
     -webkit-animation-fill-mode : forwards;
     animation-fill-mode : forwards;
 }
 .move_left {
     -webkit-animation-name            : move_left;
     animation-name            : move_left;
     -webkit-animation-duration        : 1s;
     animation-duration        : 1s;
     -webkit-animation-iteration-count : 1;
     animation-iteration-count : 1;
     -webkit-animation-fill-mode : forwards;
     animation-fill-mode : forwards;
 }
 .move_up {
     -webkit-animation-name            : move_up;
     animation-name            : move_up;
     -webkit-animation-duration        : 1s;
     animation-duration        : 1s;
     -webkit-animation-iteration-count : 1;
     animation-iteration-count : 1;
     -webkit-animation-fill-mode : forwards;
     animation-fill-mode : forwards;
 }
 .fadeIn {
     -webkit-transform : translateX(120px);
     transform : translateX(120px); 
     opacity: 1;
 }
 .fadeInUp {
     -webkit-transform : translateY(-250px);
     transform : translateY(-250px);
     opacity: 1;
     -webkit-transition :-webkit-transform .2s ease-out,opacity .2s ease-out; 
     transition :transform .2s ease-out, opacity .2s ease-out;
 }
 .fadeOutLeft {
     -webkit-transform : translateX(-120px);
     transform : translateX(-120px); 
     opacity: 0.0;
     -webkit-transition :-webkit-transform .2s ease-out,opacity .2s ease-out; 
     transition :transform .2s ease-out, opacity .2s ease-out;
 }

登入後複製

html

<!doctype html>
 <html lang="en" class="fullHeight">
 <head>
     <meta charset="UTF-8">
     <title>demo</title>
     <link rel="stylesheet" type="text/css" href="sidebar.css">
 </head>
 <body class="fullHeight">
     <p class=&#39;sidebar fullHeight&#39;>sidebar</p>
     <p class="controller">
         <p>
             <button onclick="fadeIn()">淡进</button>
             <button onclick="fadeOut()">淡出</button>
         </p>
         <p>
             <button onclick="fadeInUp()">向上淡进</button>
             <button onclick="fadeOutLeft()">向左淡出</button>
         </p>
     </p>
     <script src="sidebarEffects.js"></script>
 </body>
 </html>

登入後複製

加入JS

<script>
 var sidebarEl = document.querySelector(".sidebar");
 function fadeIn (e) {
     sidebarEl.className = &#39;sidebar fullHeight&#39;;
     sidebarEl.style.top = &#39;0px&#39;;
     sidebarEl.style.left = &#39;0px&#39;;
     sidebarEl.classList.add(&#39;move_right&#39;);
 }
 function fadeOut (e) {
     sidebarEl.className = &#39;sidebar fullHeight&#39;;
     sidebarEl.style.left = &#39;120px&#39;;
     sidebarEl.classList.add(&#39;move_left&#39;);
 }
 function fadeInUp(e) {
     sidebarEl.className = &#39;sidebar fullHeight&#39;;
     sidebarEl.style.top = &#39;250px&#39;;
     sidebarEl.style.left = &#39;120px&#39;;
     sidebarEl.classList.add(&#39;move_up&#39;);
 }
 function fadeOutLeft(e) {
     sidebarEl.className = &#39;sidebar fullHeight&#39;;
     sidebarEl.style.top = &#39;0px&#39;;
     sidebarEl.style.left = &#39;120px&#39;;
     sidebarEl.classList.add(&#39;move_left&#39;);
 }
 </script>

登入後複製

以上就是使用CSS3製作側邊欄動畫效果的全部內容和程式碼了，小夥伴們根據自己的專案需求來改善美化下就可以了哦。

以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！