作品简介
今天要给大家分享一个非常酷的HTML5网格涟漪动画。整个动画主要采用了CSS3的动画特性和颜色渐变特性，它的特点是：
可通过大量带图标的小六边形快速生成一个大六边形。 点击任何一个小六边形，即可从该六边形所在位置激起一层涟漪，就像水波一样。 涟漪波动过程中，通过CSS的模糊特效使每个六边形出现模糊的效果，让动画更加逼真。
下面这段JS代码是激起涟漪动画的核心实现：
const ripple = (target) => {
if (container.classList.contains("show-ripple")) {
return;
}
const targetRect = target.getBoundingClientRect();
const data = hexagonElements
.map((element) => {
const rect = element.getBoundingClientRect();
const centerX = rect.x + rect.width / 2;
const centerY = rect.y + rect.height / 2;
const distance = Math.round(
Math.sqrt(
Math.pow(rect.x - targetRect.x, 2) +
Math.pow(rect.y - targetRect.y, 2)
)
);
return { element, rect, centerX, centerY, distance };
})
.sort((a, b) =>
a.distance > b.distance ? 1 : a.distance < b.distance ? -1 : 0
);
const [max] = data.slice(-1);
data.forEach((item) =>
item.element.style.setProperty(
"--ripple-factor",
`${(item.distance * 100) / max.distance}`
)
);
container.classList.toggle("show-ripple");
const cleanUp = () => {
requestAnimationFrame(() => {
container.classList.remove("show-ripple");
data.forEach((item) =>
item.element.style.removeProperty("--ripple-factor")
);
max.element.removeEventListener("animationend", cleanUp);
});
};
max.element.addEventListener("animationend", cleanUp);
};
我们对hexagonElements数组中的每个六边形元素进行距离的调整，通过距离的连续微小变化来实现波动的效果。同时对六边形DOM元素进行动态CSS类的变换，实现波动过程中每个六边形的样式变化。
源码下载
“需要完整源码的朋友可以在公众号主页回复“5070”获取下载链接。
请大家注意，源码仅供用于学习，请勿用于商业用途。
END
更多动画
