css画一个圆动画效果

要画一个 CSS 圆动画效果，可以使用以下步骤：

1. 创建一个 div 元素，并设置它的宽度和高度相等，并设置为圆形。

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

2. 设置元素的边框宽度和颜色，以及 border-style 为 dashed 或 solid，这些属性将在动画中被改变。

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 10px dashed #ccc; /* 或者 border: 10px solid #ccc; */
}

3. 创建一个 keyframes 动画，并在其中改变边框的宽度和颜色，以及元素的旋转角度。

@keyframes circle-animation {
  0% {
    border-width: 10px;
    border-color: #ccc;
    transform: rotate(0deg);
  }
  50% {
    border-width: 20px;
    border-color: #f00;
    transform: rotate(180deg);
  }
  100% {
    border-width: 10px;
    border-color: #ccc;
    transform: rotate(360deg);
  }
}

4. 将动画应用到元素上，并设置动画的持续时间、重复次数等属性。

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 10px dashed #ccc; /* 或者 border: 10px solid #ccc; */
  animation-name: circle-animation;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

这样就可以创建一个 CSS 圆动画效果了。可以根据需要调整动画的持续时间、重复次数、颜色、旋转角度等属性，来实现不同的效果。