HTML&CSS：效果超惊艳的六边形卡片悬停特效

前端Hardy2025-03-18 10:10

这些代码实现了一个动态的六边形网格布局，每个六边形卡片包含背景图片、标题和描述文本。

大家复制代码时，可能会因格式转换出现错乱，导致样式失效。建议先少量复制代码进行测试，若未能解决问题，私信回复源码两字，我会发送完整的压缩包给你。

演示效果

HTML&CSS

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>公众号关注：前端Hardy</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin: 0;
            padding: 0;
            background: #e8e8e8;
            overflow-x: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
            width: 100vw;
        }

        .content-wrap {
            display: flex;
            flex-direction: column;
            width: 100%;
            justify-content: center;
            align-items: center;
            text-align: center;
            color: #0d84a6;
            margin: clamp(4rem, 4vw, 6rem) auto;
        }

        h1 {
            font-size: clamp(1.2rem, 6vw, 10rem);
            line-height: 0.75;
            max-width: 20ch;
            padding: 0.1em 0;
            text-transform: uppercase;
            text-wrap: balance;
            background: linear-gradient(320deg,#bb1767,#5231a6,#1154bf,#0d85a6,#1ba373,#9ed40a,#1ba373,#0d85a6,#1154bf,#5231a6,#bb1767);
            background-size: 400% 400%;
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            animation: colorCycle 10s ease infinite;
        }

        h6 {
            font-size: 0.9rem;
            font-weight: bold;
            color: #a2936f;
            text-transform: uppercase;
            letter-spacing: 0.2rem;
        }

        @keyframes colorCycle {
            0% {
                background-position: 0% 50%;
            }

            50% {
                background-position: 100% 50%;
            }

            100% {
                background-position: 0% 50%;
            }
        }

        #hexGrid {
            overflow: hidden;
            width: 90%;
            margin: 0 auto;
            padding: 0.866% 0;
            font-family: "Raleway", sans-serif;
            font-size: 15px;
            margin-left: 30%;
        }

        #hexGrid:after {
            content: "";
            display: block;
            clear: both;
        }

        .hex {
            position: relative;
            list-style-type: none;
            float: left;
            overflow: hidden;
            visibility: hidden;
            outline: 1px solid transparent;
            -webkit-transform: rotate(-60deg) skewY(30deg) translatez(-1px);
            -ms-transform: rotate(-60deg) skewY(30deg) translatez(-1px);
            transform: rotate(-60deg) skewY(30deg) translatez(-1px);
        }

        .hex * {
            position: absolute;
            visibility: visible;
            outline: 1px solid transparent;
        }

        .hexIn {
            display: block;
            width: 100%;
            height: 100%;
            text-align: center;
            color: #fff;
            overflow: hidden;
            -webkit-transform: skewY(-30deg) rotate(60deg);
            -ms-transform: skewY(-30deg) rotate(60deg);
            transform: skewY(-30deg) rotate(60deg);
        }

        .hex img {
            left: -100%;
            right: -100%;
            width: 100%;
            height: 100%;
            margin: 0 auto;
            background-size: cover;
            transition: transform 0.6s ease-out;
        }

        .hexIn:hover img {
            transform: scale(1.4)
        }

        .hex h1,
        .hex p {
            width: 102%;
            left: -1%;
            padding: 5%;
            box-sizing: border-box;
            background-color: rgba(0, 128, 128, 0.8);
            font-weight: 300;
            -webkit-transition: -webkit-transform 0.2s ease-out, opacity 0.3s ease-out;
            transition: transform 0.2s ease-out, opacity 0.3s ease-out;
        }

        .hex h1 {
            bottom: 50%;
            padding-top: 50%;
            font-size: 1.5em;
            z-index: 1;
            -webkit-transform: translateY(-100%) translatez(-1px);
            -ms-transform: translateY(-100%) translatez(-1px);
            transform: translateY(-100%) translatez(-1px);
        }

        .hex h1:after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 45%;
            width: 10%;
            text-align: center;
            border-bottom: 1px solid #fff;
        }

        .hex p {
            top: 50%;
            padding-bottom: 50%;
            -webkit-transform: translateY(100%) translatez(-1px);
            -ms-transform: translateY(100%) translatez(-1px);
            transform: translateY(100%) translatez(-1px);
        }

        .hexIn:hover h1,
        .hexIn:focus h1,
        .hexIn:hover p,
        .hexIn:focus p {
            -webkit-transform: translateY(0%) translatez(-1px);
            -ms-transform: translateY(0%) translatez(-1px);
            transform: translateY(0%) translatez(-1px);
        }

        @media (min-width: 1201px) {
            .hex {
                width: 19.2%;
                padding-bottom: 22.17%;
            }

            .hex:nth-child(9n + 6),
            .hex:nth-child(9n + 7),
            .hex:nth-child(9n + 8),
            .hex:nth-child(9n + 9) {
                margin-top: -4.676%;
                margin-bottom: -4.676%;
                -webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg);
                -ms-transform: translateX(50%) rotate(-60deg) skewY(30deg);
                transform: translateX(50%) rotate(-60deg) skewY(30deg);
            }

            .hex:nth-child(9n + 6):last-child,
            .hex:nth-child(9n + 7):last-child,
            .hex:nth-child(9n + 8):last-child,
            .hex:nth-child(9n + 9):last-child {
                margin-bottom: 0;
            }

            .hex:nth-child(9n + 6) {
                margin-left: 0.5%;
                clear: left;
            }

            .hex:nth-child(9n + 10) {
                clear: left;
            }

            .hex:nth-child(9n + 2),
            .hex:nth-child(9n + 7) {
                margin-left: 1%;
                margin-right: 1%;
            }

            .hex:nth-child(9n + 3),
            .hex:nth-child(9n + 4),
            .hex:nth-child(9n + 8) {
                margin-right: 1%;
            }
        }

        @media (max-width: 1200px) and (min-width: 901px) {
            .hex {
                width: 24.25%;
                padding-bottom: 28.001%;
            }

            .hex:nth-child(7n + 5),
            .hex:nth-child(7n + 6),
            .hex:nth-child(7n + 7) {
                margin-top: -6.134%;
                margin-bottom: -6.134%;
                -webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg);
                -ms-transform: translateX(50%) rotate(-60deg) skewY(30deg);
                transform: translateX(50%) rotate(-60deg) skewY(30deg);
            }

            .hex:nth-child(7n + 5):last-child,
            .hex:nth-child(7n + 6):last-child,
            .hex:nth-child(7n + 7):last-child {
                margin-bottom: 0;
            }

            .hex:nth-child(7n + 2),
            .hex:nth-child(7n + 6) {
                margin-left: 1%;
                margin-right: 1%;
            }

            .hex:nth-child(7n + 3) {
                margin-right: 1%;
            }

            .hex:nth-child(7n + 8) {
                clear: left;
            }

            .hex:nth-child(7n + 5) {
                clear: left;
                margin-left: 0.5%;
            }
        }

        @media (max-width: 900px) and (min-width: 601px) {
            .hex {
                width: 32.666%;
                padding-bottom: 37.72%;
            }

            .hex:nth-child(5n + 4),
            .hex:nth-child(5n + 5) {
                margin-top: -8.564%;
                margin-bottom: -8.564%;
                -webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg);
                -ms-transform: translateX(50%) rotate(-60deg) skewY(30deg);
                transform: translateX(50%) rotate(-60deg) skewY(30deg);
            }

            .hex:nth-child(5n + 4):last-child,
            .hex:nth-child(5n + 5):last-child {
                margin-bottom: 0;
            }

            .hex:nth-child(5n + 4) {
                margin-right: 1%;
                margin-left: 0.5%;
            }

            .hex:nth-child(5n + 2) {
                margin-left: 1%;
                margin-right: 1%;
            }

            .hex:nth-child(5n + 6) {
                clear: left;
            }
        }

        @media (max-width: 600px) {
            .hex {
                width: 49.5%;
                padding-bottom: 57.158%;
            }

            .hex:nth-child(3n + 3) {
                margin-top: -13.423%;
                margin-bottom: -13.423%;
                -webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg);
                -ms-transform: translateX(50%) rotate(-60deg) skewY(30deg);
                transform: translateX(50%) rotate(-60deg) skewY(30deg);
            }

            .hex:nth-child(3n + 3):last-child {
                margin-bottom: 0;
            }

            .hex:nth-child(3n + 3) {
                margin-left: 0.5%;
            }

            .hex:nth-child(3n + 2) {
                margin-left: 1%;
            }

            .hex:nth-child(3n + 4) {
                clear: left;
            }
        }

        @media (max-width: 400px) {
            #hexGrid {
                font-size: 13px;
            }
        }
    </style>
</head>

<body>

    <ul id="hexGrid">
        <li class="hex">
            <a class="hexIn" href="#">
                <img src="https://mmbiz.qpic.cn/sz_mmbiz_gif/U7XDMtoJdKLPtkicQc7L1umBlD8ojdQZQicpdIfMxoENI8uWd88wneicrL1jTscGv1Wh0wX8ZkzvqLu0AQyO95p1A/640?wx_fmt=gif&from=appmsg&wxfrom=13&tp=wxpic"
                    alt="" />
                <h1>东契奇三分</h1>
                <p>东契奇三分再进，又轻松写意助攻文森特，湖人正式领先20分</p>
            </a>
        </li>
        <li class="hex">
            <a class="hexIn" href="#">
                <img src="https://mmbiz.qpic.cn/sz_mmbiz_gif/U7XDMtoJdKLPtkicQc7L1umBlD8ojdQZQ9Un1XsRjPxeJQ5WX01a6mQJVaxkrKkl4mjJdsDX04XhxDwfibbaA05w/640?wx_fmt=gif&from=appmsg&tp=wxpic&wxfrom=5&wx_lazy=1&wx_co=1"
                    alt="" />
                <h1>克内克特三分</h1>
                <p>第二节，对面先得6分，只领先10分了，克内克特三分止血</p>
            </a>
        </li>
    </ul>
</body>

</html>

HTML 结构

  • hexGrid：定义一个无序列表，用于包裹所有六边形卡片。
  • hex：定义每个六边形卡片的容器。
  • hexIn：定义六边形卡片的内部链接，包含图片和文本内容。
  • img：定义卡片的背景图片。
  • h1：定义卡片的标题。
  • p：定义卡片的描述文本。

CSS 样式

  • *：全局样式，设置所有元素的外边距和内边距为0。
  • body：设置页面的整体布局，背景颜色为#e8e8e8，高度为100vh，宽度为100vw，并使用flex布局居中对齐内容。
  • .content-wrap：定义内容容器的样式，宽度为100%，居中对齐，文本对齐方式为center，颜色为#0d84a6，并设置上下外边距。
  • h1：定义标题的样式。
  • h6：定义副标题的样式。
  • @keyframes colorCycle：定义标题文字的渐变动画，通过改变background-position实现颜色循环。
  • #hexGrid：定义六边形网格的样式，宽度为90%，居中对齐，上下内边距为0.866%，字体为"Raleway", sans-serif，字体大小为15px，左侧外边距为30%。
  • #hexGrid:after：清除浮动，确保父元素的高度正确。
  • .hex：定义六边形卡片的样式，相对定位，浮动布局，隐藏溢出内容，透明度隐藏，添加3D变换效果。
  • .hex *：设置六边形卡片内部元素的绝对定位，可见性为可见。
  • .hexIn：定义六边形卡片内部的链接样式，宽度和高度为100%，居中对齐，颜色为#fff，添加3D变换效果。
  • .hex img：定义六边形卡片的背景图片样式，宽度和高度为100%，背景覆盖，过渡效果为0.6s。
  • .hexIn:hover img：鼠标悬停时，图片放大至1.4倍。
  • .hex h1, .hex p：定义六边形卡片的标题和段落样式，宽度为102%，居中对齐，背景颜色为半透明的rgba(0, 128, 128, 0.8)，字体加粗，添加过渡效果。
  • .hex h1：定义六边形卡片的标题样式，底部对齐，字体大小为1.5em，层级为1，添加3D变换效果。
  • .hex h1:after：定义标题下方的分隔线样式。
  • .hex p：定义六边形卡片的段落样式，顶部对齐，添加3D变换效果。
  • .hexIn:hover h1, .hexIn:focus h1, .hexIn:hover p, .hexIn:focus p：鼠标悬停或焦点时，标题和段落垂直居中显示。

各位互联网搭子，要是这篇文章成功引起了你的注意，别犹豫，关注、点赞、评论、分享走一波，让我们把这份默契延续下去，一起在知识的海洋里乘风破浪！

相关推荐
程序员黄同学23 分钟前
解释 TypeScript 中的枚举（enum），如何使用枚举定义一组常量？
javascript·ubuntu·typescript
Xlbb.29 分钟前
SpiderX：专为前端JS加密绕过设计的自动化工具
前端·javascript·自动化
beibeibeiooo34 分钟前
【ES6】01-ECMAScript基本认识 + 变量常量 + 数据类型
前端·javascript·ecmascript·es6
前端南玖2 小时前
深入理解Base64编码原理
前端·javascript
今天吃了嘛o2 小时前
vue中根据html动态渲染内容
javascript·vue.js·html
韶瑜不会写代码2 小时前
7-14 利用正则表达式得到一段HTML文本中所有超链接对应的网址
python·正则表达式·html
计算机毕设定制辅导-无忧学长2 小时前
HTML 基础夯实：标签、属性与基本结构的学习进度（一）
前端·学习·html
diang2 小时前
vue3实现监听从其他页签回到当前页签重新刷新setInterval
前端·javascript
打野赵怀真3 小时前
在Less中支持运算符吗？
前端·javascript
用户2587141932633 小时前
Vue中进行粘贴板粘贴数据（图片、文字等）
javascript·vue.js
热门推荐
01命令行方式将mysql数据库迁移到达梦数据库（全步骤）02如何在WPS和Word/Excel中直接使用DeepSeek功能03DeepSeek各版本说明与优缺点分析04本地化部署AI知识库：基于Ollama+DeepSeek+AnythingLLM保姆级教程05从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑06本地部署DeepSeek教程（Mac版本）07四大AI编程工具组合测评08DeepSeek RAGFlow构建本地知识库系统09DeepSeek R1本地化部署 Ollama + Chatbox 打造最强 AI 工具10ICM20948 DMP代码详解（34）