CSS3 圓圈 導航是一種經典的導航樣式,可以為網頁增加美觀的效果。CSS3 圓圈 導航可以在菜單項上方設置圓圈,用戶在鼠標懸停時會發現鼠標下方有一個圓圈,非常簡潔和美觀。
nav ul li { display: inline-block; margin: 0 10px; position: relative; } nav ul li a { display: block; text-decoration: none; padding: 10px; font-size: 16px; color: #333; } nav ul li:before { content: ''; position: absolute; width: 10px; height: 10px; border-radius: 50%; background: #666; top: -10px; left: 50%; transform: translateX(-50%); opacity: 0; transition: all 0.3s; } nav ul li:hover:before { opacity: 1; top: -20px; }
以上是 CSS3 圓圈 導航的代碼示例。代碼中使用了偽元素來設置圓圈樣式,并使用 transform 屬性來居中圓圈。通過設置偽元素和調整位置,我們可以輕松地在導航菜單上創建一個簡潔漂亮的圓形懸停效果。