SCSS线性渐变效果

Question

我有很多 spans 彼此相邻，我想添加一些 线性渐变效果 - 所以第一个有 background-color: $a、最后一个background-color: $b和"transition color from $a to $b"之间的spans。如果我没有任何意义，这张图片会对你有所帮助：

我试过 lighten()，但它只使用一种颜色。

这是当前的 SCSS：

$starting_color:  #177DEF;
$ending_color:    #2FF0D5;

$elements: 51;
@for $i from 0 to $elements {
    span:nth-child(#{$i}) {
        height: random(260) + px;
        background-color: lighten($starting_color, $i);
    }
}

Whole fiddle on Codepen

如何创建这个 "effect"？可能有一些 step 参数（步数 = 所有跨度）

Answer 1

这很长，但它有效：

//$blue: #177DEF;
$firstR: 23;
$firstG: 239;
$firstB: 125;
$blue: rgb(23, 125, 239);
//$green: #2FF0D5;
$secondR: 47;
$secondG: 240;
$secondB: 213;
$green: rgb(47, 240, 213);

body{
    background-color: #000;
}

#panel {
    font-size: 0;
}

span {
    font-size: 16px;
    display: inline-block;
    vertical-align: bottom;
    width: 10px;
    &:not(:first-of-type) {
        margin-left: 2px;
    }
}

$elements: 51;
$redDiv: ($firstR - $secondR) / $elements;
@if $redDiv < 0 {
    $redDiv: $redDiv * -1
}
$greenDiv: ($firstG - $secondG) / $elements;
@if $greenDiv < 0 {
    $greenDiv: $greenDiv * -1
}
$blueDiv: ($firstB - $secondB) / $elements;
@if $blueDiv < 0 {
    $blueDiv: $blueDiv * -1
}
@for $i from 0 to $elements {
    $redValue: $redDiv * $i;
    $greenValue: $greenDiv * $i;
    $blueValue: $blueDiv * $i;
    span:nth-child(#{$i}) {
        height: random(260) + px;
        background-color: rgb($firstR + $redValue, $firstG + $greenValue, $firstB + $blueValue);
    }
}

我将十六进制值转换为 RGB here，然后为两种颜色的每个红色、绿色、蓝色值创建单独的变量。

从第一个值中减去第二个值，然后除以元素数（这会得出每次迭代所需的更改量）。

使用 @if 确保值不是负数。

通过乘以 $i 计算变化，然后 add/subtract 变化取决于哪个值较小（第一个或第二个）。如果第一个值小于 $first + $value，如果第二个值小于 $first - $value.

这是唯一需要根据颜色进行更改的部分，其余部分适用于任何 RGB 值。

代码笔：http://codepen.io/anon/pen/ezpmXJ

SCSS线性渐变效果

SCSS linear gradient effect

colors

sass

linear-gradients