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 屬性讓它們變成一個扇形。我們還為鼠標懸停狀態添加了動畫效果,使菜單看起來更加生動。
上一篇css3 心形照片墻
下一篇css3 心理測試模板