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 に答える