使用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);
   }
}
相关推荐
诗书画唱1 分钟前
【前端教程】JavaScript 实现图片鼠标悬停切换效果与==和=的区别
开发语言·前端·javascript
光影少年1 分钟前
前端上传切片优化以及实现
前端·javascript·掘金·金石计划
喜葵11 分钟前
前端安全防护深度实践:从XSS到供应链攻击的全面防御
前端·安全·xss
_r0bin_15 分钟前
分片上传-
前端·javascript·状态模式
东北南西19 分钟前
手写React状态hook
前端·javascript·react.js
诗书画唱20 分钟前
【前端教程】JavaScript DOM 操作实战案例详解
开发语言·前端·javascript
lypzcgf21 分钟前
Coze源码分析-资源库-删除提示词-前端源码
前端·typescript·react·ai应用·coze·coze源码分析·智能体平台
代码青铜22 分钟前
【实战指南】Cursor前端+Zion后端:10分钟打造能收款的AI商业应用MVP
前端·人工智能
quan26311 小时前
Vue实践篇-02,AI生成代码
前端·javascript·vue.js
GIS之路1 小时前
GDAL 读取影像元数据
前端