使用HTML和CSS制作动画停车场网格

Question

我对CSS和HTMl相当陌生，我试图在我的网站上创建此图形，显示是否已填满停车位。我希望图形自上而下，我在制作这个图时遇到了麻烦，因为我希望每个点根据SQL的数据集改变颜色。

我似乎无法找到一个工具，可以让我创建图形，然后将其动画放到我的网站上。我想知道是否有人有一个起点或我可以用来做这个的工具。

Answer 1

您可以使用HTML使用各种DIV来映射空格，然后将CSS类添加到您想要在视觉上指示拍摄/清空的点。

然而，如果您的停车位甚至略微偏离完全正交的矩形，您可能会发现基于SVG的停车位地图，其中每个点都是PATH元素将会更好。

在任何一种情况下，只需从每个位置添加/删除CSS类以指示其状态。

E.g。给每个地点一个ID为＆＃34; spot_123＆＃34; （调整数字部分以适应）然后当你想在现场设置状态时添加一个类。

.available{
  background-color:rgba(0,255,0,0.5);
}