在 web 開發中,菜單的樣式是非常重要的,它可以直接影響用戶的體驗。一個好的菜單必須有易于使用的交互方式,同時還要有視覺上的吸引力。有時我們需要在菜單中使用圖標,而且還要實現點擊后圖標的變換效果。今天我們來介紹一種使用 CSS 實現這種效果。
<html> <head> <style> .menu-item { display: inline-block; padding: 10px 20px; text-align: center; background-color: #fff; color: #000; font-weight: bold; cursor: pointer; transition: all 0.3s ease-in-out; } .menu-item:hover { background-color: #000; color: #fff; } .menu-item.active { color: #fff; background-color: #f00; } .menu-icon { width: 20px; height: 20px; display: inline-block; margin-left: 10px; transition: all 0.3s ease-in-out; } .menu-item.active .menu-icon { transform: rotate(180deg); } </style> </head> <body> <div class="menu-item active">菜單1<span class="menu-icon"></span></div> <div class="menu-item">菜單2<span class="menu-icon"></span></div> <div class="menu-item">菜單3<span class="menu-icon"></span></div> </body> </html>
這個示例中,我們通過 CSS 設置了菜單項的基本樣式,包括字體、顏色、背景色和鼠標懸停時的效果。在每個菜單項后面添加了一個空的 span 元素,它用來放置圖標。然后我們為圖標設定了寬度、高度和 display:inline-block 屬性,這使得它與文字在同一行并相互獨立。CSS的 transform 屬性用于設置圖標的旋轉方向,通過添加一個類名active 來控制菜單項的狀態。
這里使用的實現方式相對簡單,但可以看到菜單的視覺效果已經很不錯了。如果你需要根據實際需求修改菜單的樣式,可以根據這個例子進行修改和擴展。相信這個小技巧能對你的工作有所幫助。