Question

我正在border-image使用gradient并且它运行正常，但似乎不支持transition。

此示例是否可以在悬停时实现transition？

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>可以有动画背景

我发现this codepen演示了如何使用JavaScript完成此操作。

我最好的选择是将两个<div>堆叠在一起。底部<div>将是目标渐变，顶部是开始。然后淡出顶部<div>

＆＃13;

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

＆＃13;

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

＆＃13;

该片段演示了一种在渐变之间淡入淡出的简单方法。不完美，但更顺畅，没有JavaScript。把你的其他东西放在<div>旁边，根据你的需要调整宽度和高度。

同时尝试使用:before和:after以避免重复div

Answer 3

否

这些属性不支持动画。

然而，您可以想出另一种方法来实现这一目标。

也许你有2个包装器，它们是2个不同的渐变，并且它们周围有填充物以模拟边框的外观......然后具有渐变的元素具有在悬停时淡入淡出的不透明度

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

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

3 个答案:

不可能

解决方案

否