CSS實現動畫特效導航欄

0 寫在前面

　　今天用純CSS編寫了一種帶有特效的導航欄，一方面鞏固熟悉了導航欄的一般寫法，另一方面練習了CSS3的一些新特性。

1 實現效果

　　當鼠標划過時，實現了一種動態百葉窗效果。

2 實現細節

2-0 導航欄基本架構

　　首先復習導航欄的基本架構，導航欄的實現，采用的是ul-li的結構，為了能夠實現導航效果，可以在li內部增加一個a標簽。

　　實現導航欄結構的html代碼如下：

 <div class="container">
        <ul class="menu">
            <li><a href="#">HOME</a></li>
            <li><a href="#">FIRST</a>
                <ul class="submenu">
                    <li><a href="#">one</a></li>
                    <li><a href="#">two</a></li>
                    <li><a href="#">three</a></li>
                    <li><a href="#">four</a></li>
                    <li><a href="#">five</a></li>
                    <li><a href="#">six</a></li>
                </ul>
            </li>
            <li><a href="#">SECOND</a>
                <ul class="submenu">
                    <li><a href="#">one</a></li>
                    <li><a href="#">two</a></li>
                    <li><a href="#">three</a></li>
                    <li><a href="#">four</a></li>
                    <li><a href="#">five</a></li>
                    <li><a href="#">six</a></li>
                </ul>
            </li>
            <li><a href="#">THIRD</a>
                <ul class="submenu">
                    <li><a href="#">one</a></li>
                    <li><a href="#">two</a></li>
                    <li><a href="#">three</a></li>
                    <li><a href="#">four</a></li>
                    <li><a href="#">five</a></li>
                    <li><a href="#">six</a></li>
                </ul>
            </li>
            <li><a href="#">FOURTH</a>
                <ul class="submenu">
                    <li><a href="#">one</a></li>
                    <li><a href="#">two</a></li>
                    <li><a href="#">three</a></li>
                    <li><a href="#">four</a></li>
                    <li><a href="#">five</a></li>
                    <li><a href="#">six</a></li>
                </ul>
            </li>
            <li><a href="#">OTHER</a></li>
        </ul>
    </div>

　　頁面布局和導航欄需要進行樣式的初始化，包括去除body的8px，去除a標簽固有樣式，去除ul li的固有樣式，實現水平方向的導航等。

　　需要進行模式化的調整，代碼如下：

*{
    margin:0;
    padding:0;  /*初始化頁面*/
    list-style: none; /*清除原點*/
}
body{
    background: #ccc;
}

.container{
    margin: 30px auto;  /*導航欄位置的確定上下空30px左右自適應*/
    width : 70%;
}

.container .menu{
    height:58px;
}

.menu>li{ /*只將主菜單欄水平布局，需要用>來進行選擇*/
    float:left;  /*導航欄水平布局*/
    position: relative; /*為了消除重疊效果，需要讓其子元素脫離文檔流absolute*/
}

　　a標簽的模式化調整如下：

.menu a{
    display:block;   /*a標簽可以覆蓋整個容器范圍*/  
    text-decoration: none;   /*a標簽取消下划線*/
    text-align: center;  /*文字水平居中*/
    color:black;
    padding:0 25px;
    font-size: 18px;
    line-height:36px;  /*撐開行高*/
    border-left:3px solid rgb(0,0,0,0);  /*左邊豎線占位（透明度0）*/
    text-transform:uppercase; /*全部轉成大寫字母*/
}

 

2-1 導航欄漸變背景色

　　在這個練習中，我學習使用了一種可以實現漸變色的方案 linear-gradient(#from,#to)

.menu li{
    min-width: 140px; /*設置最小寬度撐開寬度*/
    background: linear-gradient(#3d3838,#999999); /*漸變色*/
}

.menu li:hover{
    background: linear-gradient(#111111,#424242);
}

 

2-2  3D動畫效果繪制

　　為了實現動畫的3D效果，需要為元素設置一個景深(perspective)，也就是元素將對於觀察者的距離。

　　另外要用到CSS3中的一個3D旋轉效果transform:rotate3d(x,y,z,n deg);前三個參數表示繞x,y,z軸旋轉，具體繞某一軸旋轉，則將該參數置1反之置0，最后一個參數為旋轉角度，單位為deg。

　　同時，我們還可以調整初始旋轉坐標軸的位置 transform-origin:x y; 這兩個參數分別表示x y軸初始的偏移位置。

　　為了實現旋轉的動畫，我們需要通過transform:rotate3d給出一個初始狀態，一個結束狀態，並添加一個過渡transition。即可實現旋轉效果。

.menu li:hover>a{  /*需要選擇其直屬子元素，而不是全部的a標簽子元素*/
    color:white;
    border-left:3px solid white;  /*顯示左邊小豎線*/
}

.submenu{
    position:absolute; /*脫離文檔流，定位相對於父級第一個有定位的元素*/
    left:0;
    top:100%;       /*相對於父級li最底部進行定位*/
    perspective:1000px;  /*設置景深*/
    max-height: 0;   /*默認情況下需要將其隱藏，行高縮小至0*/
    z-index:0;
}

.submenu li{
    visibility:hidden;  /*這是為了避免仍有元素占位，鼠標划過下方空白區域時會觸發的bug*/
    transform: rotate3d(1,0,0,90deg); /*3d旋轉效果，繞x軸旋轉，90°*/
    transition: all 0.5s; /*過渡動畫，選擇all屬性，過渡時間為0.5s*/
    
}

.menu>li:hover .submenu{ 
    max-height: 999px;
    z-index:10;
}

.menu>li:hover .submenu li{
    visibility: visible; /*調成可見*/
    transform: rotate3d(0,0,0,0deg); /*實現3d旋轉效果，繞x軸旋轉，從90°變化到0°*/  
}

2-3 子元素選擇器與動畫延遲的應用

　　在這里我們為了實現百葉窗效果，可以通過子元素選擇器nth-child(n)，來選擇導航欄中不同的項進行旋轉

　　通過動畫延遲transition-delay，來為不同子元素設置旋轉間隔。

　　另外為了美化效果，在導航欄左上角上加一個圓角效果，用first-child進行選擇。

　　代碼如下：

.container .menu>li:first-child{
    border-radius: 5px 0 0 0;
}
.submenu li:nth-child(1){
    transition-delay: 0;
}
.submenu li:nth-child(2){
    transition-delay: 100ms;
}
.submenu li:nth-child(3){
    transition-delay: 200ms;
}
.submenu li:nth-child(4){
    transition-delay: 300ms;
}
.submenu li:nth-child(5){
    transition-delay: 400ms;
}
.submenu li:nth-child(6){
    transition-delay: 500ms;
}

 

3 總結　　

　　本次通過編寫導航欄特效，在復習導航欄基本寫法的同時，練習了一些CSS3的特性：

• 景深：perspective

• 3D旋轉動畫特效：

  • transform:rotate3d(0,1,0,45deg);
  • 參數分別為繞x,y,z軸旋轉，初始角度。

• 漸變色效果：linear-gradient(#color1,#color2);

• 動畫延遲：transition-delay