欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

css3 圓圈 導航

謝彥文1年前7瀏覽0評論

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 屬性來居中圓圈。通過設置偽元素和調整位置,我們可以輕松地在導航菜單上創建一個簡潔漂亮的圓形懸停效果。