使用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);
   }
}
相关推荐
clownAdam28 分钟前
Chrome性能优化秘籍
前端·chrome·性能优化
@Kerry~32 分钟前
phpstudy .htaccess 文件内容
java·开发语言·前端
WebDesign_Mu2 小时前
为了庆祝2025英雄联盟全球总决赛开启,我用HTML+CSS+JS制作了LOL官方网站
javascript·css·html
@PHARAOH2 小时前
WHAT - 前端性能指标(交互和响应性能指标)
前端·交互
噢,我明白了2 小时前
前端js 常见算法面试题目详解
前端·javascript·算法
im_AMBER2 小时前
Web 开发 30
前端·笔记·后端·学习·web
Jonathan Star2 小时前
Webpack 打包优化与骨架屏结合:双管齐下提升前端性能与用户体验
前端·webpack·ux
做好一个小前端3 小时前
后端接口获取到csv格式内容并导出,拒绝乱码
前端·javascript·html
第七种黄昏3 小时前
前端面试-箭头函数
前端·面试·职场和发展
Youyzq3 小时前
前端box-shadow出现兼容性问题如何处理
前端