在这篇文章中，您将学习如何使用此codepen：https://codepen.io/Joanverhulst/pen/OJBbbbd的HTML，CSS和JavaScript创建蜂窝卡。
此代码的一部分，例如神奇的悬停效应，来自https://codepen.io/Hyperplexed/pen/MWQeYLW，我从中汲取了很多灵感。
让我们跳入代码ðÖ
html代码创建一个带有“内容”类的部分。
在本节中，我们创建一个“ DIV”元素，其中具有“卡”的“ ID”和一类“卡”。此DIV元素包含另一个带有“卡”的“ DIV”元素，这是主要的卡元素。
在“卡”元素中，我们有一个带有“ card __content”类的“ div”元素，其中包含卡的标题和描述。我们还具有一类“ honeycomb”的“ DIV”元素，这是使用JavaScript生成蜂窝图案的地方。
这就是HTML的样子：
<section class="content">
<div id="cards" class="cards">
<div class="card">
<div class="card__content">
<h4 class="card__title">Starter Tier.</h4>
<p class="card__description">This tier is perfect for those who are just getting started. You'll have access to all the essential features, including a simple interface, basic analytics, and email support.</p>
</div>
<div class="honeycomb">
<!-- Contains hexagon rows and hexagon cells generated with javascript -->
</div>
</div>
</div>
</section>
接下来，必要的JavaScript代码：
代码的第一部分针对卡的容器，并定义了两个变量，数字和数字。这两个变量用于计算每张卡中应显示在蜂窝图案中的六边形数量。
const cardsContainer = document.getElementById("cards");
let numCells, numRows;
接下来，我们将创建一个函数函数，该功能可以根据容器元素的大小来计算每个卡的行数和单元格的数量。
此功能在脚本的开头，每次调整窗口大小时都会调用一次。
我们使用Math.ceil来汇总数字，这样，总会有更多的单元格和行，因此可以填充整个卡片。
function calculateGridSize() {
const rect = cardsContainer.getBoundingClientRect();
numCells = Math.ceil(rect.width / 32);
numRows = Math.ceil(rect.height / 32);
}
calculateGridSize();
接下来，我们将创建一个函数，该函数基于前面计算的行数和单元格的数量，为每张卡的蜂窝图案生成HTML。该函数首先选择卡片元素中的蜂窝状div，然后使用for循环生成六角形行和单元格的HTML。
function generateHexagons(card) {
const honeycomb = card.querySelector(".honeycomb");
let html = "";
for (let i = 0; i < numRows; i++) {
html += `<div class="hexagon-row">`;
for (let j = 0; j < numCells; j++) {
html += `<div class="hexagon"></div>`;
}
html += `</div>`;
}
honeycomb.innerHTML = html;
}
最后，脚本末尾的代码跟踪鼠标光标在卡片上的位置，并更新每个卡元素的CSS变量-Mouse-X和-Mouse-Y。这些变量在SCSS代码中使用，以创建悬停的光泽效果。这个想法来自超重的，我必须给予全部信誉。 https://codepen.io/Hyperplexed/pen/MWQeYLW。
document.getElementById("cards").onmousemove = (e) => {
for (const card of document.getElementsByClassName("card")) {
const rect = card.getBoundingClientRect(),
x = e.clientX - rect.left,
y = e.clientY - rect.top;
card.style.setProperty("--mouse-x", `${x}px`);
card.style.setProperty("--mouse-y", `${y}px`);
}
};
终于给它一些样式。
首先，我们将为我们将在项目中使用的正时函数添加一些CSS变量和SCSS变量。
@import url("https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600&display=swap");
// SCSS variable for timing function.
$ease: cubic-bezier(0.3, 0.8, 0.5, 0.5);
// CSS variable for color.
:root {
--primary: hsla(5, 90%, 30%, 1);
--neutral-50: hsla(215, 5%, 98%, 1);
--neutral-100: hsla(215, 5%, 72%, 1);
--neutral-200: hsla(215, 5%, 36%, 1);
--neutral-300: hsla(215, 5%, 24%, 1);
--neutral-400: hsla(215, 5%, 20%, 1);
--neutral-500: hsla(215, 5%, 16%, 1);
--neutral-600: hsla(215, 5%, 12%, 1);
--neutral-700: hsla(215, 5%, 8%, 1);
--neutral-800: hsla(215, 5%, 6%, 1);
--neutral-900: hsla(215, 5%, 3%, 1);
}
* {
font-family: "Hanken Grotesk", sans-serif;
box-sizing: border-box;
margin: 0;
padding: 0;
}
首先，让我们的六角形细胞和蜂窝状图案样式，
要创建六角形的形状，我们可以使用夹子。
剪辑路径属性通过使用百分比定义六个点来创建六角形形状。第一个点是在顶级中心（50％0％），接下来的两个点在右边缘（100％25％和100％75％），第四点在底部中心（50％100％） ，最后两个点在左边缘（1％75％和1％25％）。通过调整最外部点的位置（1％而不是0％和99％而不是100％）来产生细胞之间的轻微边缘。
）。然后，我们使用：nth-child pseudo选择器，仅针对均匀数字，我们将X值降低50％，因此我们获得了蜂窝图案。
.hexagon {
min-height: 32px;
min-width: 32px;
background: var(--neutral-800);
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 1% 75%, 1% 25%);
transition: all 0.5s $ease;
}
.hexagon-row {
display: flex;
width: 100%;
margin-bottom: -7px;
}
.hexagon-row:nth-child(even) .hexagon {
transform: translateX(50%);
}
.honeycomb {
transform: translate(-1rem, -1rem);
}
接下来，让我们在卡中添加一些默认样式：
我们给卡片一个相对的位置，高度为256px，
您可以设置固定宽度，但是该卡的宽度将由网格控制，
然后，我们添加一个边框并设置了一个边界-Dradius。我们添加了隐藏的溢出，因此六边形图案包含在卡中。
最后但并非最不重要的一点是，我们添加了一个盒子阴影来创建该卡的轮廓，当通过更改阴影的颜色悬停时，这将显得可见。
单击时，通过使用转换：刻度（0.98）;
，略微缩小尺度。然后，我们将内容放置在绝对位置。
.card {
position: relative;
height: 256px;
border-radius: 0.5rem;
border: thin solid var(--neutral-600);
transition: $ease all 0.2s;
overflow: hidden;
cursor: pointer;
box-shadow: 0px 0px 0px 3px var(--neutral-800);
&:hover {
box-shadow: 0px 0px 0px 3px var(--neutral-700);
}
&:active {
transform: scale(0.98);
}
&__content {
position: absolute;
z-index: 1;
color: white;
padding: 2rem;
}
&__title {
margin-bottom: 1rem;
}
&__description {
color: var(--neutral-200);
}
}
最后，我们将通过创建“光泽效应”混合蛋白来添加光泽效果，可以使用Mixin，所有项目或样式表。
@mixin shine-effect($size, $color) {
&::before {
position: absolute;
border-radius: inherit;
content: "";
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0;
background: radial-gradient(
$size circle at var(--mouse-x) var(--mouse-y),
$color 10%,
transparent 50%
);
filter: blur(2rem);
transition: all 1s $ease;
}
&:hover::before {
opacity: 1;
}
}
首先，我们将在伪元素之前创建一个::将添加到卡中。我们将不透明度设置为0，因此当不徘徊时不可见。接下来，我们创建一个径向梯度，该梯度遵循我们先前使用JS设置的鼠标位置。我们将其提供两个参数，分别是$大小和$颜色，当使用混合蛋白时，我们可以设置它们。
最终，我们将悬停的悬停在不透明度上，以使悬停时可见效果。
最后，我们需要将Mixin包括到卡中，并结束业务。
.card {
//other card code
@include shine-effect(96px, var(--primary));
//...
}
如果您想使用其他卡和样式查看完整的工作代码，这是一个Codepen：