純CSS3創意導覽功能表特效

簡要教程

這是一款非常有創意的純CSS3導覽功能表特效。該導覽功能表主要通過CSS3 transform和transition方法實現效果，非常簡單。該特效由進擊的燊提供。

使用方法

HTML結構

該導覽功能表使用一個<nav>元素來包裹一組無序列表。

<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創意導覽功能表特效的內容，更多相關內容請關注topic.alibabacloud.com（www.php.cn）！

