本篇攻略将为大家详细介绍如何通过纯CSS实现六边形(蜂窝)导航效果,同时支持hover以及兼容不同浏览器。以下是具体的步骤:
步骤一:准备HTML和CSS基础代码
首先,我们需要编写HTML代码,创建一个六边形导航菜单,代码如下:
<div class="hexagon-wrap">
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
</div>
接下来,我们需要使用CSS来制作六边形形状和导航样式,代码如下:
.hexagon-wrap {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
max-width: 800px;
margin: 0 auto;
}
.hexagon {
position: relative;
width: 200px;
height: 115.47px;
background: #3e3e3e;
margin-bottom: 27.09px;
}
.hexagon:before,
.hexagon:after {
content: "";
position: absolute;
width: 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
}
.hexagon:before {
bottom: 100%;
border-bottom: 57.735px solid #3e3e3e;
}
.hexagon:after {
top: 100%;
width: 0;
border-top: 57.735px solid #3e3e3e;
}
以上代码会在页面上呈现出6个六边形,但是无法响应鼠标的hover事件。
步骤二:添加hover效果
接下来,我们需要添加hover效果,让鼠标悬浮在六边形上时,导航菜单发生变化。代码如下:
.hexagon:hover {
background: #c0392b;
}
.hexagon:hover:before {
border-bottom-color: #c0392b;
}
.hexagon:hover:after {
border-top-color: #c0392b;
}
这部分代码会使鼠标悬浮在六边形上时,导航菜单背景变为红色,并且导航菜单底部和顶部的三角形变为红色。
步骤三:兼容不同浏览器
最后,我们需要为不同的浏览器做出兼容性处理。我们在步骤一的CSS基础代码中,已经设置了使用flexbox进行布局。因此,对于不同的浏览器,我们只需要分别添加不同的vendor prefix即可。例如,为了兼容旧版Safari:
.hexagon-wrap {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
max-width: 800px;
margin: 0 auto;
}
我们还可以为不支持:before和:after伪元素的浏览器添加特定样式。例如:
.hexagon:before, .hexagon:after {
content: "";
position: absolute;
width: 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
}
.hexagon:before {
bottom: 100%;
border-bottom: 57.735px solid #3e3e3e;
-webkit-transform: rotate(120deg);
-ms-transform: rotate(120deg);
transform: rotate(120deg);
}
.hexagon:after {
top: 100%;
width: 0;
border-top: 57.735px solid #3e3e3e;
-webkit-transform: rotate(-120deg);
-ms-transform: rotate(-120deg);
transform: rotate(-120deg);
}
这段代码将在不支持伪元素的浏览器上创建六边形导航菜单。
示例说明
以下是两个六边形(蜂窝)导航效果的示例说明:
示例一
在这个示例中,我们将六个六边形导航按钮放置在一个白色背景上。当鼠标悬浮在任意一个六边形上时,导航菜单背景变为深蓝色,同时滑动的箭头和标签文本也随之变色。
代码示例:
<div class="hexagon-wrap">
<div class="hexagon">
<div class="hexagon-overlay">
<div class="hexagon-label">
<span>Home</span>
</div>
<div class="hexagon-arrow"></div>
</div>
</div>
<div class="hexagon">
<div class="hexagon-overlay">
<div class="hexagon-label">
<span>About</span>
</div>
<div class="hexagon-arrow"></div>
</div>
</div>
<div class="hexagon">
<div class="hexagon-overlay">
<div class="hexagon-label">
<span>Services</span>
</div>
<div class="hexagon-arrow"></div>
</div>
</div>
<div class="hexagon">
<div class="hexagon-overlay">
<div class="hexagon-label">
<span>Portfolio</span>
</div>
<div class="hexagon-arrow"></div>
</div>
</div>
<div class="hexagon">
<div class="hexagon-overlay">
<div class="hexagon-label">
<span>Contact</span>
</div>
<div class="hexagon-arrow"></div>
</div>
</div>
<div class="hexagon">
<div class="hexagon-overlay">
<div class="hexagon-label">
<span>Blog</span>
</div>
<div class="hexagon-arrow"></div>
</div>
</div>
</div>
.hexagon-wrap {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
max-width: 800px;
margin: 0 auto;
background-color: #fff;
padding: 20px;
}
.hexagon {
position: relative;
width: 150px;
height: 86.60px;
margin-right: 10px;
margin-bottom: 20px;
}
.hexagon-overlay {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: #3e3e3e;
color: #fff;
opacity: 0;
transition: opacity 0.3s ease;
}
.hexagon:hover .hexagon-overlay {
opacity: 0.8;
}
.hexagon:hover .hexagon-overlay .hexagon-arrow {
border-left-color: #1b6ba3;
}
.hexagon:hover .hexagon-overlay .hexagon-label {
color: #1b6ba3;
}
.hexagon-arrow {
position: absolute;
left: -25px;
top: 50%;
margin-top: -10px;
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid #3e3e3e;
transition: border-color 0.3s ease;
}
.hexagon-label {
position: absolute;
left: 0;
bottom: 0;
padding: 5px 10px;
font-size: 14px;
font-weight: bold;
text-align: center;
text-transform: uppercase;
transition: color 0.3s ease;
}
该示例中的每个六边形包含一个标签和一个箭头。当鼠标悬停在六边形上时,导航菜单会变为深蓝色,并且标签和箭头会变为浅蓝色。
示例二
在这个示例中,我们将六个六边形导航按钮放置在一个黑色背景上。当鼠标悬浮在任意一个六边形上时,导航菜单背景变为橙色,同时滑动的箭头和标签文本也随之变色。
代码示例:
<div class="hexagon-wrap2">
<div class="hexagon2">
<div class="hexagon-overlay2">
<div class="hexagon-label2">
<span>Home</span>
</div>
<div class="hexagon-arrow2"></div>
</div>
</div>
<div class="hexagon2">
<div class="hexagon-overlay2">
<div class="hexagon-label2">
<span>About</span>
</div>
<div class="hexagon-arrow2"></div>
</div>
</div>
<div class="hexagon2">
<div class="hexagon-overlay2">
<div class="hexagon-label2">
<span>Services</span>
</div>
<div class="hexagon-arrow2"></div>
</div>
</div>
<div class="hexagon2">
<div class="hexagon-overlay2">
<div class="hexagon-label2">
<span>Portfolio</span>
</div>
<div class="hexagon-arrow2"></div>
</div>
</div>
<div class="hexagon2">
<div class="hexagon-overlay2">
<div class="hexagon-label2">
<span>Contact</span>
</div>
<div class="hexagon-arrow2"></div>
</div>
</div>
<div class="hexagon2">
<div class="hexagon-overlay2">
<div class="hexagon-label2">
<span>Blog</span>
</div>
<div class="hexagon-arrow2"></div>
</div>
</div>
</div>
.hexagon-wrap2 {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
max-width: 800px;
margin: 0 auto;
background-color: #000;
padding: 20px;
}
.hexagon2 {
position: relative;
width: 150px;
height: 86.60px;
margin-right: 10px;
margin-bottom: 20px;
}
.hexagon-overlay2 {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: #3e3e3e;
color: #fff;
opacity: 0;
transition: opacity 0.3s ease;
}
.hexagon2:hover .hexagon-overlay2 {
opacity: 0.8;
}
.hexagon2:hover .hexagon-overlay2 .hexagon-arrow2 {
border-left-color: #fd7e14;
}
.hexagon2:hover .hexagon-overlay2 .hexagon-label2 {
color: #fd7e14;
}
.hexagon-arrow2 {
position: absolute;
left: -25px;
top: 50%;
margin-top: -10px;
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid #3e3e3e;
transition: border-color 0.3s ease;
}
.hexagon-label2 {
position: absolute;
left: 0;
bottom: 0;
padding: 5px 10px;
font-size: 14px;
font-weight: bold;
text-align: center;
text-transform: uppercase;
transition: color 0.3s ease;
}
该示例中的每个六边形包含一个标签和一个箭头。当鼠标悬停在六边形上时,导航菜单会变为橙色,并且标签和箭头会变为黄色。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:纯css实现的六边形(蜂窝)导航效果(支持hover/兼容浏览器) - Python技术站