CSS實(shí)現(xiàn)圓圍繞中心旋轉(zhuǎn)

在CSS中，我們可以使用transform屬性來實(shí)現(xiàn)圓圍繞中心旋轉(zhuǎn)的效果，以下是一個(gè)簡(jiǎn)單的示例：

HTML結(jié)構(gòu)：

<div class="circle"></div>

CSS樣式：

.circle {
  width: 100px;
  height: 100px;
  background-color: #000;
  position: relative;
  transform-origin: 50% 50%; /* 設(shè)置旋轉(zhuǎn)中心為元素的中心 */
  animation: rotate 2s linear infinite; /* 設(shè)置旋轉(zhuǎn)動(dòng)畫 */
}
@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

在這個(gè)示例中，我們創(chuàng)建了一個(gè)名為.circle的類，用于表示一個(gè)圓形元素，通過transform-origin屬性，我們?cè)O(shè)置了旋轉(zhuǎn)的中心為元素的中心（50% 50%），我們使用@keyframes規(guī)則創(chuàng)建了一個(gè)名為rotate的動(dòng)畫，該動(dòng)畫從0度旋轉(zhuǎn)到360度，從而實(shí)現(xiàn)了一個(gè)完整的旋轉(zhuǎn)效果，我們通過animation屬性將rotate動(dòng)畫應(yīng)用到了.circle元素上，并設(shè)置了動(dòng)畫的持續(xù)時(shí)間為2秒，以及動(dòng)畫的重復(fù)次數(shù)為無限次（linear表示動(dòng)畫勻速進(jìn)行）。