1. Python技术站首页
  2. css

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

• css
yizhihongxing

本篇攻略将为大家详细介绍如何通过纯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中，可以使用多种方法来实现文本省略，本攻略将介绍一些常用的方法。 1. 使用text-overflow属性 可以使用text-overflow属性来控制文本的省略方式，例如： <p class="ellipsis">这是一段需要省略的文本，这是…

    css 2023年5月18日
    00

  • 关于图片与文字垂直方向不对齐问题的解决方法

    当网站中同时存在图片和文字时，经常会遇到图片与文字垂直方向不对齐的问题，这不仅影响美观度，也会影响用户的体验。下面，我们来讲解如何解决这一问题。 问题的原因 首先要了解，这种问题的原因通常是因为图片和文字所在的盒子（box）使用了不同的属性，导致文本所在的行盒（line-box）和图像所在的行盒不在同一水平线上。 常见的有以下两种情况： 图片设置了 vert…

    css 2023年6月10日
    00

  • 如何利用vw+rem进行移动端布局

    利用vw+rem进行移动端布局，可以实现网页在不同设备上的自适应布局，使得页面在任何尺寸的屏幕上都能够完美展示。下面是利用vw+rem进行移动端布局的详细攻略： 1. 使用视窗单位 视窗单位有两种：vw 和 vh。它们的意思是 viewport width 和 viewport height。1vw 等于视窗宽度的 1%，1vh 等于视窗高度的 1%。在这里…

    css 2023年6月9日
    00

  • javascript单张多张图无缝滚动实例代码

    下面是详细的讲解： 简介 JavaScript无缝滚动是一种常见的网页效果之一。实现无缝滚动需要用到一些JavaScript知识，结合HTML和CSS来完成。这里我们将讲解如何实现一个单张或多张图片的无缝滚动效果。 实现步骤 1. HTML结构 首先，我们需要在HTML中添加一个容器，并在容器内添加需要滚动的图片。 <div class="s…

    css 2023年6月11日
    00

  • 基于javascript实现样式清新图片轮播特效

    下面是“基于 JavaScript 实现样式清新图片轮播特效”的完整攻略。 概述 图片轮播特效常用于网站首页，给用户带来良好的视觉体验。本攻略将介绍如何使用 JavaScript 实现一个样式清新的图片轮播特效。 准备工作 在开始之前，需要准备以下内容： 存有图片的文件夹 一个 HTML 文件 一个 CSS 文件 一个 JavaScript 文件 实现步骤 …

    css 2023年6月11日
    00

  • js实现带圆角的多级下拉菜单效果

    要实现带圆角的多级下拉菜单效果，需要使用HTML、CSS和JavaScript技术。 HTML部分 首先，在HTML中创建ul和li元素，代表菜单和菜单项。每个菜单项li需要设置一个唯一的id，同时在li中添加一个包含菜单项文本的a元素。同时，为了便于样式控制和避免全局污染，还可以给每个菜单一个独特的class。 CSS部分 菜单的样式设定需要涉及到多个方面…

    css 2023年6月10日
    00

  • CSS font-family为英文和中文字体分别设置不同的字体

    为英文和中文字体分别设置不同的字体，可以通过CSS font-family属性来实现。下面是详细的攻略： 1. 确定字体 首先，需要确定要使用的英文字体和中文字体。可以通过在网上搜索字体库，或者使用一些常见的字体，例如： 英文字体：Arial、Helvetica、Times New Roman、Georgia等 中文字体：宋体、黑体、微软雅黑、华文细黑等 2…

    css 2023年6月9日
    00

  • Webpack中雪碧图插件使用详解

    我为您详细介绍「Webpack中雪碧图插件使用详解」的完整攻略。 简介 在前端开发中，为了加快网站速度和优化用户体验，常常会使用雪碧图技术来减少图片请求次数。Webpack作为当前最流行的前端构建工具之一，提供了多个处理雪碧图的插件，本篇攻略将详细讲解如何使用Webpack中的雪碧图插件。 雪碧图插件介绍 Webpack中的雪碧图插件通常可以分为两类，分别是…

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