.div1 {
  width: 200px;
  height: 200px;
  border: 1px solid white;
  margin: 100px auto;
  border-radius: 50%;
  /* transform: translate(-50%, -50%) rotate(50deg); */
  border-color: transparent;
  box-shadow: 6px -5px 13px rgba(255, 253, 253, 0.884452);

  /*动画属性*/
  animation: myAnimation 3s; /* 规定在3秒内完成动画 */ /* 规定在3秒内完成动画 */
  animation-iteration-count: infinite; /* 规定动画无限次执行 */
  animation-timing-function: linear; /* 规定动画匀速执行 */
}

/* 定义动画如何执行 */
@keyframes myAnimation {
  /* 写法1 这种写法只能定义开始和结束时的动画 */
  form {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }

  /* 写法2 还可以定义10%、20%、50%等等规定的时间段执行什么操作 */
  /*
   0% {
     transform: rotate(0deg);
   }
   30% {}
   60% {}
   100% {
     transform: rotate(360deg);
   }
   */
}