具有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

您可以在線性漸變中to right和to left切換。

的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> 

Answer 2

嗯，除了像您一樣使用to right關鍵字之外，沒有確切的CSS屬性可以執行此操作。 但是，萬一您確實需要，可以采用一種駭人聽聞的方法來完成。

這就是我要做的：

var color = document.getElementById('color');
var btn = document.getElementById('reverse');
reverse.onclick = reverseColor;

var transformDeg = 0;

function reverseColor() {

  if (transformDeg == 0) {
    transformDeg = 180;
    color.style.transform = "rotateY(" + transformDeg + "deg)";
  } else {
    transformDeg = 0;
    color.style.transform = "rotateY(" + transformDeg + "deg)";
  }
}

這是JSFiddle演示

另請注意，以這種方式執行此操作還將撤消所有內容。 因此，這取決於您想要實現的目標是否合適：）

Answer 3

您可以添加一個類。

 var color = document.getElementById('color'); var btn = document.getElementById('reverse'); reverse.onclick = reverseColor; function reverseColor() { color.classList.toggle('reverse'); } 

 .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%); } .reverse { 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%) } 

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