使用scss生成旋转圆圈

news2024/12/26 9:32:52

图片

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