[分享]css3小方块无限变色

CSS3小方块无限变色是一项很有趣和实用的技能，它可以让你的网页更加生动且吸引人。下面是一个CSS3小方块无限变色的示例：.box { width: 50px; height: 50px; backg...

CSS3小方块无限变色是一项很有趣和实用的技能，它可以让你的网页更加生动且吸引人。下面是一个CSS3小方块无限变色的示例：

.box {
  width: 50px;
  height: 50px;
  background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
  animation: rainbow 3s infinite;
}

@keyframes rainbow {
  0% {background-position: 0% 50%;}
  50% {background-position: 100% 50%;}
  100% {background-position: 0% 50%;}
} 

这段代码将会产生一个大小为50x50px的方块，并且使用了渐变的方式来设定颜色，颜色根据顺序从红色到紫色排列。通过animate属性，我们使用了一个名为“rainbow”的关键帧，它在动画过程中将使方块无限变色。

通过这个简单的CSS3小方块无限变色的示例，现在你可以尝试自己创造更多不同风格、奇特的方块来装饰你的网页。祝你好运！