css 子元素 圆 均匀分布 展开动画

一般情况下使用scss就可以实现

@import "math";

#app {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200px;
    height: 200px;
    position: relative;
    border-radius: 50%;
    border: 1px solid #000;
    
    > span {
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        transform-origin: center center;
        width: 50px;
        height: 50px;
        background: red;
        border-radius: 70%;
        transition: all 3s;
        top: 0;
        left: 0;
        opacity: 0;
        transform: translateX(-50%) translateY(-50%);
        @for $i from 0 through 7 {
            @keyframes moveFromCenter-#{$i} {
                from {
                    left: 50%;
                    top: 50%;
                    opacity: 0.5;
                }
                to {
                    left: calc(#{(cos(360deg / 8 * ($i + 2)) * 100px)} + 50%);
                    top: calc(#{(sin(360deg / 8 * ($i + 2)) * 100px)} + 50%);
                     opacity: 1;
                }
            }
            &:nth-child(#{$i}) {
                animation: moveFromCenter-#{$i} 0.3s * $i 1 forwards normal;
               
            }
        }
    }
}

在vue实际应用中
不需要引入sass:math 默认集成的
不需要特意安装sass 因为scss就是sass的改良版

.middle-center {
        width: 200px;
    	height: 200px;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        border: 1px solid red;
       
        .middle-item {
          width: 50px;
          height: 50px;
          position: absolute;
          display: flex;
          justify-content: center;
          align-items: center;
          transition: all 3s;
          $size: 300px;//圆的大小
          $num: 8;//数量 就是这个圆被分成了几份
          @for $i from 0 through $num {
            $co: cos(360deg / $num * $i);
            $si: sin(360deg / $num * $i );
            $left: calc(#{$co} * #{$size} + 50%);
            $top: calc(#{$si} * #{$size} + 50%);
            @keyframes moveFromCenter-#{$i} {
              from {
                transform: translateX(-50%) translateY(-50%);
              }
              to {
                transform: translateX(calc(-50% + #{$left})) translateY(calc(-50% + #{$top}));//这里得用插值 要不然会报错
              }
            }
            &:nth-child(#{$i}) {
              animation: moveFromCenter-#{$i} 0.3s * $i 1 forwards normal;
            }
          }
 }

如果报错可能时scss 或者sass-loader版本问题
我的版本"sass-loader": "^8.0.2","scss": "^0.2.4"
并且移除vue.config.js中有关css的配置