CSS實(shí)現(xiàn)無數(shù)線條旋轉(zhuǎn)效果的方法

在CSS中，我們可以使用@keyframes規(guī)則來創(chuàng)建動畫，從而實(shí)現(xiàn)無數(shù)線條旋轉(zhuǎn)的效果，以下是一個簡單的示例代碼：

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.lines {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 50px;
}
.lines::before, .lines::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 1px solid #000;
}
.lines::before {
  transform-origin: 50% 50%;
  animation: rotate 2s linear infinite;
}
.lines::after {
  transform-origin: 50% 50%;
  animation: rotate 3s linear infinite;
}

在這個示例中，我們創(chuàng)建了一個名為rotate的動畫，該動畫將元素從0度旋轉(zhuǎn)到360度，我們將這個動畫應(yīng)用到了一個名為.lines的元素上，該元素包含兩個偽元素::before和::after，分別表示旋轉(zhuǎn)的線條，通過調(diào)整transform-origin屬性，我們可以控制旋轉(zhuǎn)的中心點(diǎn)，通過調(diào)整animation屬性的值，我們可以控制旋轉(zhuǎn)的速度、方向以及是否循環(huán)播放。