html - HTML5 (& CSS3?) 在背景中创建一个正方形网格

Question

我有一个背景的想法，但我不知道它是否可以完成，如果可以，最好的方法是什么。只是为了让您了解我的想法，它是一个正方形网格作为页面的背景，但是当您将鼠标悬停在一个正方形上时，它会改变颜色并慢慢向后移动（我知道如何制作动画部分）。网格应该跨越整个页面，宽度和高度，并且溢出将被隐藏。我也希望如果页面可以调整大小

所以我想知道这是否可以做到。如果可以，我将如何生成网格？

我完全不知所措。有任何想法吗？

Answer 1

我会用<canvas>. 或者也许用相同大小的 DIV 填充整个身体，高度和宽度以百分比定义。可以说这将是 10x10 DIV 的网格。或者，您可以使用 jQuery 即时创建任意数量的 DIV（以填充整个高度）。您可以浮动这些 DIV 以填充整个视口，如果调整窗口大小，则使用媒体查询来排列它们。悬停时，您可以在每个 DIV 上应用一些动画。当然，您可以在这些 DIV 上放置其他元素。