用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

您可以添加一個類。

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>

Answer 3

嘛，不是正好有一個特定的CSS屬性要做到這一點，除了像你一樣使用to right關鍵字。但是如果你真的需要的話，還有一種方法可以做到這一點。

這是我會怎麼做：

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)"; 
    } 
} 

Here is the JSFiddle demo

還要注意，做這種方式也將扭轉的所有內容。所以這可能是或不適合取決於你想達到什麼:)