[SCSS] Use Math lib

@use 'sass:math';

.menu-item {
  opacity: 0;
  transition: 0.5s;
}

$r: 120px;
$n: 6;
$step: 360deg / $n;

for $i from 1 through $n {
    .board:hover .menu-item:nth-child(#{$i}) {
      $deg: $step * ($i - 1);
      $x: $r * math.sin($deg);
      $y: -$r * math.cos($deg);
      // @debug $x, $y;
      transform: translate($x, $y);
      opacity: 1;
    }
}

 

posted @ 2024-09-03 20:45  Zhentiw  阅读(16)  评论(0编辑  收藏  举报