CSS实现多层嵌套结构最外层旋转其它层不旋转效果

<!--头像区域-->
<div class="headPortrait-panel">
   <!--加载层-->
   <div class="load-panel loadWhirl">
       <!--头像显示层-->
       <div class="headPortrait-img-panel avatarRotation">
           <img src="../assets/img/login/LoginWindow_BigDefaultHeadImage@2x.png"/>
       </div>
   </div>
</div>
• css部分：对样式进行布局，实现旋转动画逻辑。
 /*头像区域*/
 .headPortrait-panel{
   width: 100%;
   height: 200px;
   display: flex;
   justify-content: center;
   align-items: center;
   margin-top: 50px;
   /*加载层*/
   .load-panel{
     width: 240px;
     height: 240px;
     border-radius: 50%;
     display: flex;
     justify-content: center;
     align-items: center;
     background: url("../img/login/loading-circle@2x.png");
     img{
       width: 100%;
       height: 100%;
    }
     // 头像旋转动画
     .avatarRotation{
       animation: internalAvatar 3s linear;
       // 动画无限循环
       animation-iteration-count:infinite;
    }
     /*头像显示层*/
     .headPortrait-img-panel{
       width: 200px;
       height: 200px;
       border-radius: 50%;
       overflow: hidden;
       border: solid 1px #ebeced;
       img{
         width: 100%;
         height: 100%;
      }
    }
  }
   // 外部旋转动画
   .loadWhirl{
     animation: externalHalo 3s linear;
     // 动画无限循环
     animation-iteration-count:infinite;
  }
}
 // 定义外部光环旋转动画
 @keyframes externalHalo {
   0%{
     transform: rotate(0deg);
  }
   25%{
     transform: rotate(90deg);
  }
   50%{
     transform: rotate(180deg);
  }
   100%{
     transform: rotate(360deg);
  }
}
 // 定义内部头像旋转动画
 @keyframes internalAvatar {
   0%{
     transform: rotate(0deg);
  }
   25%{
     transform: rotate(-90deg);
  }
   50%{
     transform: rotate(-180deg);
  }
   100%{
     transform: rotate(-360deg);
  }
}