色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

css3 扇形導航欄代碼

吉茹定2年前10瀏覽0評論

CSS3 扇形導航欄是一種基于 CSS3 技術實現的獨特導航設計。它會使你的網站看起來更加時尚和現代化。下面是一個示例代碼,你可以通過復制代碼和修改參數來實現自己的扇形導航菜單。

.menu {
position: relative;
width: 200px;
height: 200px;
margin: 100px auto;
}
.menu a {
position: absolute;
top: 50%;
left: 50%;
width: 60%;
height: 60%;
margin: -30% 0 0 -30%;
text-align: center;
line-height: 150%;
border-radius: 50%;
color: #fff;
background-color: rgba(0,0,0,.25);
transition: all .25s;
transform-origin: center bottom;
}
.menu a:hover {
transform: scale(1.2) rotate(-15deg);
background-color: rgba(0,0,0,.75);
}
.menu a:nth-child(1) {
transform: rotate(0deg) skew(30deg);
}
.menu a:nth-child(2) {
transform: rotate(60deg) skew(30deg);
}
.menu a:nth-child(3) {
transform: rotate(120deg) skew(30deg);
}
.menu a:nth-child(4) {
transform: rotate(180deg) skew(30deg);
}
.menu a:nth-child(5) {
transform: rotate(240deg) skew(30deg);
}
.menu a:nth-child(6) {
transform: rotate(300deg) skew(30deg);
}

這個扇形導航欄是基于一個圓形容器實現的。每個菜單項使用絕對定位和 transform 屬性來定位到正確的位置。然后使用 transform 屬性讓它們變成一個扇形。我們還為鼠標懸停狀態添加了動畫效果,使菜單看起來更加生動。