Question

我希望这6个圆位于大圆的外面，因为它们在圆的一半内，但是我希望它们在圆的外面，所以我可以将一些图标放在该圆的里面，并且它们出现在圆的外面而不是一半像这样的代码。

HTML：

<ul>
    <li><div class="logo"> <img src="icons8_facebook_old_127px.png" alt=""> </div></li>
    <li><div class="logo"> <img src="icons8_gmail_127px.png" alt=""> </div></li>
    <li><div class="logo"> <img src="icons8_instagram_127px.png" alt=""> </div></li>
    <li><div class="logo"> <img src="icons8_twitter_127px.png" alt=""></div></li>
    <li><div class="logo"> <img src="icons8_twitter_127px.png" alt=""></div></li>
    <li><div class="logo"> <img src="icons8_twitter_127px.png" alt=""></div></li>

</ul>

scss：

@import "compass/css3";

$small: 100;
$radius: 200;
$origin: $radius - ($small/2);
$num-elements: 6;



@-webkit-keyframes rotation {
   from {-webkit-transform: rotate(0deg);}
   to   {-webkit-transform: rotate(360deg);}
}

body {
text-align: center;
}

ul {
  list-style: none;
  margin: 50px auto;
  padding:0;
  width: $radius * 2px;
  height: $radius * 2px;
  display: block;
  position: relative;
  background: #eee;
  -webkit-animation: rotation 10s linear infinite;
  -webkit-animation-origin: 50% 50%;
  @include border-radius(50%);

li {
    dislay: block;
    width: $small + px;
    height: $small + px;
    padding: 0;
    
    @include border-radius(50%);
   -webkit-animation: rotation 10s linear reverse infinite;
    -webkit-animation-origin: 50% 50%;
    position: absolute;
    &:hover {
        -webkit-animation-duration: .5s;
        -webkit-animation-direction: normal;
        cursor:pointer;
    };
  }
  
  @for $i from 1 through $num-elements { 
    $degree: 360/$num-elements * $i;
$x-point: cos($degree + 0deg) * $radius;
$y-point: sin($degree + 0deg) * $radius;
    li:nth-child(#{$i}) {
    left: $origin + $x-point +px;
    top: $origin + $y-point +px;
    }
  }
 
}

The Code from Codepen

Answer 1

问题是您将$ radius用于大圆圈和小圆圈，您可以添加一个新变量$ c-radius：250;然后在以下几行中使用它

   $x-point: cos($degree + 0deg) * $c-radius;
   $y-point: sin($degree + 0deg) * $c-radius;

根据需要更改$ c半径。

圆形问题外的圆形图标

1 个答案: