css3如何实现圆形旋转动画效果

css3如何实现圆形旋转动画效果，下面编程教程网小编给大家详细介绍一下具体实现代码！

html代码：

<div class="arc-rotate">
  <div class="demo"></div>
</div>

css3语法：

body {
  background: #f00;
}
.arc-rotate {
  width: 300px;
  height: 300px;
  border: 3px solid white;
  border-top-color: green;
  border-bottom-color: red;
  margin: 100px;
  border-radius: 50%;
  animation: circle 4s infinite linear;
  background: white;
}

@-webkit-keyframes circle {
  0% {
    transform: rotate(0deg);
  }
  
  100% {
    transform: rotate(-360deg);
  }
}

.demo {
  width: 250px;
  height: 250px;
  border: 3px solid white;
  border-left-color: blue;
  border-right-color: yellow;
  margin: 25px;
  border-radius: 50%;
  animation: circle 4s infinite ease;
  background: white;
}