簡要教學
這是一款非常有創意的純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中文網（m.sbmmt.com）！
