六芒星能力图动画：从技术宅到段子手的进化之路

2023-10-28 19:02:07

利用 CSS 实现炫酷的六芒星能力图动画

大家好，我是你们的技术宅小明，今天我们就来大展身手，用纯 CSS 制作一个酷炫的六芒星能力图动画！

背景网格绘制

要绘制背景网格，我们可以使用 CSS 的 border 属性，轻松实现切图的效果：

.grid {
  width: 300px;
  height: 300px;
  background-color: #000;
  border: 1px solid #fff;
  border-spacing: 10px;
}

六芒星绘制

六芒星由两个等边三角形组成，我们可以用 CSS 的 transform 属性巧妙地旋转它们：

.star {
  width: 0;
  height: 0;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  border-top: 150px solid #ff0;
  transform: rotate(30deg);
}

添加动画效果

现在，只需给六芒星加上动画效果，让它转起来：

.star {
  animation: rotate 2s infinite linear;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

完整代码：

.grid {
  width: 300px;
  height: 300px;
  background-color: #000;
  border: 1px solid #fff;
  border-spacing: 10px;
}

.star {
  width: 0;
  height: 0;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  border-top: 150px solid #ff0;
  transform: rotate(30deg);
  animation: rotate 2s infinite linear;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}