<div class="box">
  <div class="ddd">
    <div class="ccc"></div>
  </div>
</div>

.box {
  display: grid;
  height: 100vh;
  place-content: center;
  box-sizing: border-box;
}

.ccc {
  width: 200px;
  height: 200px;
  border: 3px solid #c0eeaa;
  border-radius: 50%;
  padding-top: 30px;

  animation: 1s linear infinite alternate boxMagic, 4s linear infinite spinning;
}
/*过渡主要是给父盒子添加这样,子盒子才会放大*/
.ddd {
  /*添加过渡,cubic-bezier自定义速度*/
  transition: transform 0.4s cubic-bezier(0.23, 1.83, 0.42, 1.19);
}
.ddd:hover {
  transform: scale(1.2);
}
@keyframes boxMagic {
  from {
    box-shadow: 0 0 0 #feac5e, 0 0 0 #c779d0, 0 0 0 #4bc0c8, 0 0 0 #42db75;
  }
  to {
    box-shadow: 0 -10px 0 #feac5e, 10px 0 0 #c779d0, 0 10px 0 #4bc0c8,
      -10px 0 0 #42db75;
  }
}
@keyframes spinning {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}