過渡不適用於邊框圖像和漸變

Question

我使用帶gradient border-image ，它工作正常，但它似乎不支持transition 。

是否有可能在此示例中實現懸停transition ？

的jsfiddle

 div { border:10px solid blue; height:120px; float:left; transition:1s all; border-image: linear-gradient(to bottom, white, blue) 1 100%; } div:hover { border-image: linear-gradient(to bottom, skyblue, blue) 1 100%; } 

 <div></div> 

Answer 1

正如其他人已經告訴過你的那樣，現在還不可能轉換漸變。 偽造效果的最佳方法是使用不透明度，可以轉換。 你不需要添加任何元素， :before和:after偽元素就可以了。 看看下面的css：

div {
    height:120px;
    width:10px;
    padding: 0 10px;
    background: salmon;
    background-clip: content-box;
    position: relative;
}
div:after, div:before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    content:'';
}
div:after {
    background: linear-gradient(to bottom, white 0%, blue 100%);
    z-index: -1;
    transition: opacity 1s;
}
div:before {
    background: linear-gradient(to bottom, skyblue 0%, blue 100%);
    z-index: -2;
}
div:hover:after {
    opacity: 0;
}

例如： https ： //jsfiddle.net/et0ffrqx/2/

Answer 2

不可能

這還不可能，因為linear-gradient被計算為圖像，而不是實際顏色。

解

嘗試將<div>放在另一個可以作為邊框的<div>中。 然后外部的<div>可以有一個動畫背景

我發現這個codepen演示了如何使用JavaScript完成此操作。

我最好的選擇是將兩個<div>堆疊在一起。 底部<div>將是目標漸變，頂部是開始。 然后淡出頂部的<div>

 #start { position:absolute; width: 100px; height: 100px; z-index: 1; opacity: 1; background: linear-gradient(red,blue); transition: opacity 0.5s ease; } #end { position:absolute; width: 100px; height: 100px; background: linear-gradient(green,orange); z-index: -1; } #start:hover { opacity: 0; } 

 <div id="start">Start</div> <div id="end">End</div> 

該片段演示了一種在漸變之間淡入淡出的簡單方法。 不完美，但更順暢，沒有JavaScript。 把你的其他東西放在<div>旁邊，根據你的需要調整寬度和高度。

同時嘗試使用:before和:after以避免重復div

Answer 3

沒有

這些屬性不支持動畫。

但是，您可以想出另一種方法來實現這一目標。

也許你有兩個包裹物，它們是兩個不同的漸變，並且它們周圍有填充物以模擬邊框的外觀......然后具有漸變的元素具有在懸停時淡入淡出的不透明度。

https://jsfiddle.net/sheriffderek/5uoypaoo/

<div class="gradient-1">
    <div class="gradient-2"></div>
    <div class="thing"></div>
</div>

.thing {
    position: relative;
    width: 200px;
    height: 200px;
    background: white;
    float: left;
}

.gradient-1 {
    position: relative;
    background: linear-gradient(45deg, pink, blue);
    opacity: 1;
    padding: 1rem;
    float: left;
}

.gradient-1:hover .gradient-2 {
    opacity: 1;
}

.gradient-2 {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(45deg, lightgreen, orange);
    opacity: 0;
    transition: opacity 1s ease-in-out;
}