使用scss生成旋转圆圈

图片

html代码:

javascript 复制代码
<!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 代码:

javascript 复制代码
@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);
   }
}
相关推荐
GBVFtou2 分钟前
浏览器嵌套兼容处理
前端
华仔啊3 分钟前
前端真的需要懂算法吗?该怎么样学习?
前端·javascript
笔尖的记忆7 分钟前
【前端架构和框架】react准备知识
前端·javascript
拜无忧16 分钟前
【小游戏】逃逸小球h5,登录背景,缺口逃逸小球多边形
前端
烛阴18 分钟前
Python 列表推导式:让你的代码更优雅、更高效
前端·python
文心快码BaiduComate19 分钟前
开工不累,双强护航:文心快码接入 DeepSeek-V3.2-Exp和 GLM-4.6,助你节后高效Coding
前端·人工智能·后端
快乐是一切22 分钟前
PDF底层格式之水印解析与去除机制分析
前端·数据结构
麋鹿原24 分钟前
Android Room 数据库之简单上手
前端·kotlin
一小池勺30 分钟前
改变上下文的 API:call, apply, bind
前端·javascript
三门41 分钟前
vue官网新读之后收获记录
前端