六边形 html 导航菜单,CSS实现多彩的六边形蜂窝菜单
时间: 2024-01-05 07:16:09 浏览: 23
好的,这是一个很有趣的问题。要创建一个六边形导航菜单,可以使用 HTML 和 CSS 来实现。下面是一个简单的 HTML 结构:
```
<div class="hexagon-menu">
<ul>
<li><a href="#">菜单项1</a></li>
<li><a href="#">菜单项2</a></li>
<li><a href="#">菜单项3</a></li>
<li><a href="#">菜单项4</a></li>
<li><a href="#">菜单项5</a></li>
</ul>
</div>
```
接下来,我们用 CSS 来实现多彩的六边形蜂窝菜单。首先,我们设置 `.hexagon-menu` 的位置和大小:
```
.hexagon-menu {
position: relative;
margin: 0 auto;
width: 400px;
height: 346px;
}
```
然后,我们使用 CSS3 的 `transform` 属性来旋转和倾斜六边形。我们还使用 `:before` 和 `:after` 伪元素来添加三角形,从而创建六边形的效果。最后,我们使用颜色渐变来添加多彩的效果。
```
.hexagon-menu ul li {
list-style: none;
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 173px;
transform-origin: 0 0;
}
.hexagon-menu ul li:nth-child(1) {
transform: rotate(30deg) skewY(30deg);
}
.hexagon-menu ul li:nth-child(2) {
transform: rotate(90deg) skewY(30deg);
}
.hexagon-menu ul li:nth-child(3) {
transform: rotate(150deg) skewY(30deg);
}
.hexagon-menu ul li:nth-child(4) {
transform: rotate(210deg) skewY(30deg);
}
.hexagon-menu ul li:nth-child(5) {
transform: rotate(270deg) skewY(30deg);
}
.hexagon-menu ul li:nth-child(1):before,
.hexagon-menu ul li:nth-child(1):after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 173px solid #ff6b6b;
transform-origin: 0 0;
}
.hexagon-menu ul li:nth-child(1):before {
transform: skewY(-30deg) rotate(-60deg);
}
.hexagon-menu ul li:nth-child(1):after {
transform: skewY(30deg) rotate(-60deg);
}
.hexagon-menu ul li:nth-child(2):before,
.hexagon-menu ul li:nth-child(2):after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 173px solid #feca57;
transform-origin: 0 0;
}
.hexagon-menu ul li:nth-child(2):before {
transform: skewY(-30deg) rotate(0deg);
}
.hexagon-menu ul li:nth-child(2):after {
transform: skewY(30deg) rotate(0deg);
}
.hexagon-menu ul li:nth-child(3):before,
.hexagon-menu ul li:nth-child(3):after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 173px solid #48dbfb;
transform-origin: 0 0;
}
.hexagon-menu ul li:nth-child(3):before {
transform: skewY(-30deg) rotate(60deg);
}
.hexagon-menu ul li:nth-child(3):after {
transform: skewY(30deg) rotate(60deg);
}
.hexagon-menu ul li:nth-child(4):before,
.hexagon-menu ul li:nth-child(4):after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 173px solid #1dd1a1;
transform-origin: 0 0;
}
.hexagon-menu ul li:nth-child(4):before {
transform: skewY(-30deg) rotate(120deg);
}
.hexagon-menu ul li:nth-child(4):after {
transform: skewY(30deg) rotate(120deg);
}
.hexagon-menu ul li:nth-child(5):before,
.hexagon-menu ul li:nth-child(5):after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 173px solid #5f27cd;
transform-origin: 0 0;
}
.hexagon-menu ul li:nth-child(5):before {
transform: skewY(-30deg) rotate(180deg);
}
.hexagon-menu ul li:nth-child(5):after {
transform: skewY(30deg) rotate(180deg);
}
.hexagon-menu ul li a {
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
text-align: center;
text-decoration: none;
}
```
最后,我们可以添加一些鼠标悬停效果来使菜单更加互动性:
```
.hexagon-menu ul li:hover:before,
.hexagon-menu ul li:hover:after {
border-bottom-color: #fff;
}
.hexagon-menu ul li:hover a {
text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}
```
这样就完成了一个多彩的六边形蜂窝菜单。你可以根据自己的需求来调整颜色和样式。