純CSS3創意導航選單特效

簡要教學

這是一款非常有創意的純CSS3導航選單特效。此導航選單主要透過CSS3 transform和transition方法實現效果，非常簡單。此特效由進擊的燊提供。

 使用方法

 HTML結構

此導覽選單使用一個

元素來包覆一組無序列表。

<nav>
  <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Docs</a></li>
      <li><a href="#">Demos</a></li>
      <li><a href="#">中文</a></li>
  </ul>
</nav>

CSS樣式

該導航選單在滑鼠滑過選單項目時，選單項目稍微傾斜動畫，並且在該選單項目的上下會有兩條線條滑出。選單項目的傾斜動畫是在選單項目被滑鼠滑過時，使用transform屬性對超連結元素進行旋轉和縮放。

li a {
    display: block;
    font-size: 20px;
    text-align: center;
    padding: 10px 15px;
}
 
li a:hover {
    transform: rotate(5deg) scale(1.1);
}

選單項目的上下2條線條使用超連結元素的:before和:after偽元素來製作。它們開始時透明度為0，寬度為0，並使用transform屬性將它們旋轉和移動。

li a:before, li a:after {
    opacity: 0;
    border-top: 1px solid white;
    content: '';
    display: block;
    position: relative;
    z-index: -1;
    margin: auto;
    width: 0px;
}
 
li a:before {
    top: 0px;
    transform: rotate(120deg) translateY(-50%) translateX(-50%);
}
 
li a:after {
    top: 5px;
    transform: rotate(-60deg) translateY(-50%) translateX(-50%);
}

在滑鼠滑過時，它們的透明度變為1，寬度設定為20像素，並採用ease效果的平滑過渡。

li a:hover:before, li a:hover:after{
    transition: all 0.3s ease;
    opacity: 1;
    width: 20px;
}

以上就是純CSS3創意導航選單特效的內容，更多相關內容請關注PHP中文網（www.php.cn）！