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;}}}