图片
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);
}
}