javascript - 使用 css 属性反向线性渐变

Question

我有一个充满线性渐变颜色的 div。单击按钮我想反转线性渐变颜色。我通过改变线性渐变值再次实现了它。我想知道的不是更改线性渐变值，而是有任何特定的 CSS 属性来反转线性渐变。希望你理解我的问题

var color  =  document.getElementById('color');
var btn = document.getElementById('reverse');
reverse.onclick = reverseColor;
function reverseColor(){
 color.style.background = "linear-gradient(to right, rgb(237,195 ,194) 0% ,rgb(237,195 ,194) 20%, rgb(226,167 ,165) 20% ,rgb(226,167 ,165) 40%, rgb(215,138 ,136) 40% ,rgb(215,138 ,136) 60%, rgb(203,110 ,106) 60% ,rgb(203,110 ,106) 80%, rgb(192,81 ,77) 80% ,rgb(192,81 ,77) 100%)";
}

.linear{
  width:200px;
  height:30px;
  background: linear-gradient(to right, rgb(192,81 ,77) 0% ,rgb(192,81 ,77) 20%, rgb(203,110 ,106) 20% ,rgb(203,110 ,106) 40%, rgb(215,138 ,136) 40% ,rgb(215,138 ,136) 60%, rgb(226,167 ,165) 60% ,rgb(226,167 ,165) 80%, rgb(237,195 ,194) 80% ,rgb(237,195 ,194) 100%);
}

<div id="color" class="linear">

</div>
<button id="reverse" style="margin-top:50px">
Reverse Gradient
</button>

Answer 1

您可以在线性渐变中切换向右和向左。

JSFIDDLE

代码如下:

var color = document.getElementById('color');
var btn = document.getElementById('reverse');
myVar = "left";

function colorfn() {
  color.style.background = "linear-gradient(to " + myVar + ", rgb(237,195 ,194) 0% ,rgb(237,195 ,194) 20%, rgb(226,167 ,165) 20% ,rgb(226,167 ,165) 40%, rgb(215,138 ,136) 40% ,rgb(215,138 ,136) 60%, rgb(203,110 ,106) 60% ,rgb(203,110 ,106) 80%, rgb(192,81 ,77) 80% ,rgb(192,81 ,77) 100%)";
}
btn.onclick = function() {
  myVar = myVar == "left" ? "right" : "left";
  colorfn();
}

colorfn();

.linear {
  width: 200px;
  height: 30px;
}

<div id="color" class="linear">

</div>

<button id="reverse" style="margin-top:50px">
  Reverse Gradient
</button>