1. Python技术站首页
  2. css

纯css实现的六边形(蜂窝)导航效果(支持hover/兼容浏览器)

• css

本篇攻略将为大家详细介绍如何通过纯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技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • 详解jQuery移动页面开发中的ui-grid网格布局使用

    详解jQuery移动页面开发中的ui-grid网格布局使用 什么是ui-grid网格布局？ ui-grid是jQuery Mobile框架中提供的一种网格布局方式，用于将页面内容按照网格布局方式进行排列，通常用于移动设备的页面开发中。 如何使用ui-grid网格布局？ 在HTML代码中定义ui-grid网格布局。 <div class="ui…

    css 2023年6月11日
    00

  • Bootstrap常用组件学习(整理)

    Bootstrap常用组件学习(整理) Bootstrap是一个流行的CSS框架，它包含众多的组件和工具，可以快速构建响应式和现代化的Web页面。本文将对Bootstrap常用组件进行详细的介绍和说明。 导航栏组件 导航栏组件是Bootstrap中最常用的组件之一，它可以用于构建各种导航菜单和工具栏。 <nav class="navbar n…

    css 2023年6月10日
    00

  • DIV+CSS命名规范全记录

    下面给您详细讲解“DIV+CSS命名规范全记录”的完整攻略。 一、 命名规范概述 在进行html和css代码编写过程中，采用良好命名规范是十分重要的，这样能将代码组织得更加简洁明了，有利于代码的维护和更新。 良好的命名规范有以下几点要求： 必须有意义，能准确描述所表示的内容； 避免出现过于宽泛的命名； 专注并确定性，最好不用缩写或缩短词汇的长度； 使用小写字…

    css 2023年6月10日
    00

  • 【经典源码收藏】jQuery实用代码片段(筛选,搜索,样式,清除默认值,多选等)

    【经典源码收藏】jQuery实用代码片段(筛选,搜索,样式,清除默认值,多选等)是一篇关于jQuery实用代码片段的攻略，其中包括了一些可以直接使用的代码片段，可供开发者在开发过程中直接使用，提高开发效率。以下是对该攻略的详细讲解： 一、筛选与搜索 1.1 筛选指定元素 $(“selector”).filter(expression); 使用该代码片段可以筛…

    css 2023年6月9日
    00

  • css3实现背景图片拉伸效果像桌面壁纸一样

    要实现背景图片拉伸效果像桌面壁纸一样，我们可以使用CSS3中的background-size属性。该属性可以改变背景图片的大小。 在使用background-size属性之前，需要先确定背景图片需要覆盖的区域。可以使用背景图片的URL属性指定图片的路径，并用background-repeat属性指定不用重复平铺该背景图片。 具体操作如下： 首先，在CSS文件…

    css 2023年6月9日
    00

  • DIV+CSS中让布局、背景图片、文字内容居中的方法

    下面开始详细讲解DIV+CSS中让布局、背景图片、文字内容居中的方法。 一、水平居中 对于宽度确定的块级元素，我们可以使用margin来实现水平居中。具体实现方法是，给元素设置左右margin为auto即可。 div{ width: 300px; /*设置元素的宽度*/ margin: 0 auto; /*让元素水平居中*/ } 对于宽度不确定的块级元素，我…

    css 2023年6月9日
    00

  • 20个专业HTML5动画工具推荐(珍藏版)

    20个专业HTML5动画工具推荐(珍藏版)攻略 HTML5动画工具概述 HTML5动画是现代网页设计中不可或缺的一部分，能够为网站增加更多的元素。好的动画可以增加网站的吸引力和交互性，并且可以为用户带来更好的体验。 在本文中，我们将介绍20个值得推荐的HTML5动画工具。这些工具具有各种各样的功能和优点，可以帮助您在网站中创建出色的动画效果。 20个HTML…

    css 2023年6月10日
    00

  • Dreamweaver如何给div添加css样式? dw给div添加css样式的方法

    Dreamweaver是一款常用的Web开发工具，可以方便地为HTML元素添加CSS样式。本攻略将详细讲解如何使用Dreamweaver为div元素添加CSS样式，包括基本操作、样式设置和示例说明。 1. 基本操作 在Dreamweaver中，为div元素添加CSS样式的基本操作如下： 打开Dreamweaver，打开HTML文件。 在代码视图中，找到要添加…

    css 2023年5月18日
    00
合作推广
合作推广
分享本页
返回顶部