0

我在 codepen 上找到了一个时尚的 Pure CSS 旋钮，但它只生成 5 倍数的百分比类（例如 5%、10%、20% 等）。

http://codepen.io/brewing/pen/Imxpc 

$barColor: tomato
$overlayColor: #fffde8
$backColor: #2f3439

$step: 5 // step of % for created classes

$loops: round(100 / $step)
$increment: round(360 / $loops)
$half: round($loops / 2)
@for $i from 0 through $loops
  .progress-#{$i*$step}
    @if $i < $half
      $nextdeg: 90deg + ( $increment * $i )
      background-image: linear-gradient(90deg, $backColor 50%, transparent 50%, transparent), linear-gradient($nextdeg, $barColor 50%, $backColor 50%, $backColor)
    @else
      $nextdeg: -90deg + ( $increment * ( $i - $half ) )
      background-image: linear-gradient($nextdeg, $barColor 50%, transparent 50%, transparent), linear-gradient(270deg, $barColor 50%, $backColor 50%, $backColor)

最后生成的 3 个类如下所示：

.progress-90 {
  background-image: linear-gradient(54deg, tomato 50%, transparent 50%, transparent), linear-gradient(270deg, tomato 50%, #2f3439 50%, #2f3439);
}

.progress-95 {
  background-image: linear-gradient(72deg, tomato 50%, transparent 50%, transparent), linear-gradient(270deg, tomato 50%, #2f3439 50%, #2f3439);
}

.progress-100 {
  background-image: linear-gradient(90deg, tomato 50%, transparent 50%, transparent), linear-gradient(270deg, tomato 50%, #2f3439 50%, #2f3439);
}

但是，当我尝试更改它以生成从 0 到 100 的所有百分比的类时，这些类最终对于第一个渐变具有错误的角度：

.progress-90 {
  background-image: linear-gradient(70deg, tomato 50%, transparent 50%, transparent), linear-gradient(270deg, tomato 50%, #2f3439 50%, #2f3439);
}

.progress-95 {
  background-image: linear-gradient(90deg, tomato 50%, transparent 50%, transparent), linear-gradient(270deg, tomato 50%, #2f3439 50%, #2f3439);
}

.progress-100 {
  background-image: linear-gradient(110deg, tomato 50%, transparent 50%, transparent), linear-gradient(270deg, tomato 50%, #2f3439 50%, #2f3439);
}
4

1 回答 1

1

出现问题是因为它使用整数算术。

当你想要 1% 步长时，这变成了 $increment = 3.6 度。它四舍五入为 4，这导致了问题。

更改微积分，使其不使用增量，而是使用原始微积分：

@if $i < $half
    $nextdeg: 90deg + ( 360 * $i / $loops )
    background-image: linear-gradient(90deg, $backColor 50%, transparent 50%, transparent), linear-gradient($nextdeg, $barColor 50%, $backColor 50%, $backColor)
@else
    $nextdeg: -90deg + ( 360 * ( $i - $half ) / $loops )
    background-image: linear-gradient($nextdeg, $barColor 50%, transparent 50%, transparent), linear-gradient(270deg, $barColor 50%, $backColor 50%, $backColor)

请注意，唯一的变化是用公式替换 $increment 来计算它

演示

于 2013-10-12T09:14:04.077 回答