过渡不适用于边框图像和渐变

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