我刚接触网络开发，试图通过修改tutorial来学习，使其成为一个交错的六边形网格，当用anime.js点击时会淡出。
下面是它按预期工作的gif（宽度1080px）：
但只要我改变屏幕宽度（例如1600px）：
左下角看起来有点与其他贴图断开连接，这会降低效果。我想让它不这样做，但不确定anime.js的问题是什么。我如何才能让它按预期工作？
下面是我运行的代码：
Codepen for convenience
超文本：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="./homepage.css">
</head>
<body>
<!-- hexagonal grid -->
<div class="containercontainer">
<div class="hexagoncontainer">
<div id="hexagons"></div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
<script src="./homepage.js"></script>
</body>
</html>CSS：
/* CSS Document */
@keyframes background-pan {
from {
background-position: 0% center;
}
to {
background-position: -200% center;
}
}
body {
width:100%;
overflow-x: hidden;
}
.containercontainer {
animation: background-pan 10s linear infinite;
background: linear-gradient(
to right,
rgb(98,0,234),
rgb(236,64,122),
rgb(98,0,234)
);
background-size: 200%;
height: 100vh;
overflow: hidden;
margin-left: -75px;
margin-right: -200px;
margin-top: -50px;
margin-bottom: -10px;
}
.hexagoncontainer {
--s: 100px; /* size of a hexagon */
--m: 1px; /* space between each heaxgon */
--r: calc(var(--s)*3*1.1547/2 + 4*var(--m));
display:flex;
}
#hexagons div {
width: var(--s);
height: calc(var(--s)*1.1547);
margin: var(--m);
display: inline-block;
clip-path: polygon(0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0%);
margin-bottom: calc(var(--m) - var(--s)*0.32);
}
#hexagons::before {
content: "";
width: calc(var(--s)/2 + var(--m));
float: left;
height: 100%;
shape-outside: repeating-linear-gradient(
transparent 0 calc(var(--r) - 3px),
#fff 0 var(--r));
}
.hexagon {
background-color: rgb(20, 20, 20);
}最后，javascript：
const wrapper = document.getElementById("hexagons");
let columns = 0, rows = 0, toggled = false;
const hexagonOnClick = index => {
toggled = !toggled;
anime({
targets: ".hexagon",
opacity: toggled ? 0 : 1,
delay: anime.stagger(50, {
grid: [columns, rows],
from: index
})
});
}
const createTile = index => {
const tile = document.createElement("div");
tile.classList.add("hexagon");
tile.onclick = e => hexagonOnClick(index);
tile.style.opacity = toggled ? 0 : 1;
return tile;
}
const createTiles = quantity => {
Array.from(Array(quantity)).map((tile, index) => {
wrapper.appendChild(createTile(index));
});
}
const createGrid = () => {
wrapper.innerHTML = "";
const size = document.body.clientWidth > 800 ? 100 : 50;
columns = Math.floor(document.body.clientWidth / size) + 2;
rows = Math.floor(document.body.clientHeight / size) + 2;
wrapper.style.setProperty("--columns", columns)
wrapper.style.setProperty("--rows", rows);
wrapper.style.setProperty("--hexagonSize", size);
createTiles(columns * rows);
}
createGrid();
window.onresize = () => createGrid();任何帮助，这是非常感谢!谢谢!
1条答案
按热度按时间nnt7mjpx1#
我自己通过修修补补找到了答案！
问题就在CSS中：
页边距为奇数行中的大量六边形留下了空间，但在偶数行中将它们缩短了一个。通过添加多一点空间（将页边距调整为-220px），现在可以按预期工作了！