使用scss生成旋转圆圈

图片

html代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./index.css">
</head><body><div class="container"><div class="item">你</div><div class="item">我</div><div class="item">她</div><div class="item">唐</div><div class="item">老</div><div class="item">鸭</div><div class="item">。</div><div class="item">，</div></div>
</body></html>

scss 代码：


@use 'sass:math'as math;@mixin flex {display: flex;align-items: center;justify-content: center;
}$count: 8;
$containerSize: 400px;
$itemSize: 80px;
$rotateX: 50deg;body {@include flex;width: 100%;height: 100%;overflow: hidden;
}.container {position: relative;width: $containerSize;height: $containerSize;border: 1px solid red;border-radius: 50%;transform-origin: center;transform-style: preserve-3d;transform: rotateX($rotateX); // 添加 X 轴倾斜@include flex;// 添加旋转动画animation: spin 10s linear infinite;&:hover {animation-play-state: paused;.item {animation-play-state: paused;}}
}.item {width: $itemSize;height: $itemSize;background-color: greenyellow;position: absolute;border-radius: 50%;display: flex;align-items: center;justify-content: center;cursor: pointer;@for $i from 1 through $count {$deg: math.div(math.div(360, $count) * $i * 3.14159265359, 180);&:nth-child(#{$i}) {$radius: math.div($containerSize, 2);$left: #{$radius * math.cos($deg) - math.div($itemSize, 2)};$top: #{$radius * math.sin($deg) - math.div($itemSize, 2)};left: calc(50% + #{$left});top: calc(50% + #{$top});background-color: grey;transform: rotateZ(-$rotateX); // 反向旋转animation: reverseSpin 10s linear infinite;}}
}// 定义旋转动画
@keyframes spin {0% {transform: rotateX($rotateX) rotateZ(0deg);}100% {transform: rotateX($rotateX) rotateZ(360deg);}
}// 定义反向旋转动画
@keyframes reverseSpin {0% {transform: rotateZ(-0deg);}100% {transform: rotateZ(-360deg);}
}