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日

相关文章

  • 对于一些css样式的巧妙方法进行总结(推荐)

    对于一些 CSS 样式的巧妙方法进行总结 在开发 Web 页面时，CSS 样式的使用是非常重要的，可以用来美化页面的同时也可以提高页面的交互性和用户体验。在这里，介绍一些 CSS 样式的巧妙方法，这些方法不仅可以方便我们的开发，还可以提高开发效率，降低代码量。 示例1：使用 Flexbox 进行页面布局 Flexbox 是一个 CSS 布局模块，提供了更加灵…

    css 2023年6月10日
    00

  • CSS3 filter(滤镜)实现网页灰色或者黑色模式的示例代码

    使用CSS3 filter滤镜可以轻松实现网页灰色或者黑色模式。下面以灰色模式为例，提供两条示例说明： 示例一：使用grayscale()函数实现网页灰色模式 grayscale()函数可以将图像转换为灰度图像，取值范围为0到100，0表示完全无色（黑色），100表示完全灰度（白色）。我们可以将网页的所有元素应用该函数，即可实现灰色模式。 html { fi…

    css 2023年6月9日
    00

  • css 背景样式属性说明

    CSS 背景样式属性说明 background-color background-color 属性用于设置元素的背景颜色。 div { background-color: #fff; } 上面的示例将 div 元素的背景颜色设置为白色。 background-image background-image 属性用于设置元素的背景图像。可以将背景图片与背景颜色一…

    css 2023年6月9日
    00

  • HTML+Sass实现HambergurMenu(汉堡包式菜单)

    HTML和Sass的结合可以实现汉堡包式菜单，下面是实现的步骤： 步骤1： HTML 结构 <div class="hm-container"> <button class="hm-btn"> <span></span> <span></span>…

    css 2023年6月10日
    00

  • 图文详解Element-UI中自定义修改el-table样式

    我会详细讲解如何自定义修改el-table样式。 1. 准备工作 在开始前，请确保你已经安装了element-ui，并且已经能够正常使用。同时，也需要了解一些基础的css知识。 2. 定义CSS样式 首先，我们需要定义一些CSS样式来修改el-table的外观。以下是一些常用的CSS样式： /* 设置表格的边框 */ .el-table__body { bo…

    css 2023年6月10日
    00

  • 老生常谈position定位——让人又爱又恨的属性

    对于“老生常谈position定位——让人又爱又恨的属性”，我可以给你一个完整的攻略。 什么是position定位？ position是CSS中非常重要的一个属性，它用于设置元素的定位方式。常见的取值有static（静态定位）、relative（相对定位）、absolute（绝对定位）和fixed（固定定位）。 元素的位置可以由CSS的left、right、…

    css 2023年6月10日
    00

  • 详解css常用选择器

    下面是详解 CSS 常用选择器的完整攻略： 一、CSS 选择器简介 在 CSS 中，选择器用来指定我们要样式化的 HTML 元素。CSS 选择器有很多种，它们各自拥有不同的特点和用法。在本文中，我们将详解 CSS 中常用的选择器类型。 二、CSS 基本选择器 1. 元素选择器 元素选择器是指通过元素名称来选择它所作用的 HTML 元素。例如： p { col…

    css 2023年6月9日
    00

  • 原生JavaScript实现日历功能代码实例(无引用Jq)

    下面是“原生JavaScript实现日历功能代码实例(无引用Jq)”的完整攻略： 1. 前言 日历是常用的组件之一，本文将通过原生 JavaScript 实现一个简单的日历，并且不依赖于 jQuery 等第三方库。主要实现以下功能： 显示当前时间，包括年、月、日。 可以切换月份，并显示当前月份的日期信息。 2. HTML 结构 HTML 结构十分简单，只需一…

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