CSS3的一個強大功能就是能夠創建出令人驚嘆的菜單效果,其中之一就是菜單滑入效果。通過利用CSS3的transition(過渡)屬性和transform(轉換)屬性來實現在鼠標懸停時菜單的平滑滑入動畫效果。
.menu { width: 200px; background-color: #333; color: #fff; transform: translateX(-200px); transition: transform 0.2s ease-out; } .menu:hover { transform: translateX(0); } .menu ul { padding: 0; margin: 0; list-style: none; } .menu li { padding: 10px; border-bottom: 1px solid #555; } .menu a { color: #fff; text-decoration: none; }
首先,我們定義了一個.menu元素,并將其向左平移200px,也就是隱藏了菜單。這時候,鼠標懸停在菜單上,我們利用:hover偽類來觸發菜單平滑滑入的動畫效果。我們用transform將菜單平移回原來的位置,也就是transform: translateX(0);。
為了實現菜單項之間的分割線,我們添加了一個 li元素的border-bottom屬性,并且定義了li和a元素的一些基本樣式。
這個簡單的CSS代碼片段能夠實現如此令人驚嘆的效果,讓人深深地感受到了CSS3的強大和優雅。
上一篇css3 自適應樣式
下一篇css3 草地