使用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);
   }
}
相关推荐
掘金安东尼17 分钟前
前端周刊第421期(2025年7月1日–7月6日)
前端·面试·github
摸鱼仙人~19 分钟前
深入理解 classnames:React 动态类名管理的最佳实践
前端·react.js·前端框架
未来之窗软件服务22 分钟前
chrome webdrive异常处理-session not created falled opening key——仙盟创梦IDE
前端·人工智能·chrome·仙盟创梦ide·东方仙盟·数据调式
kymjs张涛22 分钟前
零一开源|前沿技术周报 #6
前端·ios·harmonyos
玲小珑25 分钟前
Next.js 教程系列(十)getStaticPaths 与动态路由的静态生成
前端·next.js
天天鸭31 分钟前
写个vite插件自动处理系统权限,降低99%重复工作
前端·javascript·vite
蓝婷儿36 分钟前
每天一个前端小知识 Day 23 - PWA 渐进式 Web 应用开发
前端
无奈何杨1 小时前
CoolGuard风控中新增移动距离和移动速度指标
前端·后端
恋猫de小郭1 小时前
Google I/O Extended :2025 Flutter 的现状与未来
android·前端·flutter
江城开朗的豌豆1 小时前
Vue-router方法大全:让页面跳转随心所欲!
前端·javascript·vue.js