如何仅使用 CSS 更改 DIV `background linear-gradient` on hover with fade effect？

Question

首先，我说的是 background 而不是 background-color。我四处查看堆栈溢出，但 this solution 但这是针对图像的。虽然我不喜欢创建渐变图像并使用这种方法。它可能只是模糊了原始图像，因为图像大小是可变的。

我想要的淡入淡出效果 background-color 但似乎无法在背景颜色中使用线性渐变。

这是我的代码：

#div-text {
  display: flex;
  flex-direction: row;
  width: 80%;
  height: 80%;
  border-radius: 20px;
  background: #2d2e31;
}

.cl-button {
  font-family: 'Merienda One', monospace;
  order: 2;
  align-self: center;
  height: 80%;
  width: 60%;
  border: 0;
  background-color: transparent;
  color: aliceblue;
  font-size: 16px;
  margin-left: 10px;
  text-align: left;
}

#div-text:hover {
  animation-name: div-text-hover;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-timing-function: ease;
}

@keyframes div-text-hover {
  0% {
    background: linear-gradient(45deg, #36D8FF, #00acee, #66757f);
  }
  100% {
    background: linear-gradient(45deg, #36D8FF, #00acee, #66757f);
  }
}

<div id="div-text">
  <button id="button-text" class="cl-button">Text Here</button>
</div>

当我将鼠标悬停在 DIV 上时，它应该将背景更改为具有 FADE 效果的上述渐变。但是当我悬停时，背景立即改变如下：

我希望背景在纯 CSS 没有 Jquery 或其他任何情况下缓慢淡入而不是那么明显。就像我们使用 background-color .我发现无法使用 background.

执行此操作

编辑： 我尝试每 10% 添加一次@keyframes，它仍然会急剧改变每一帧的不透明度。将同一行输入 60 次以获得 60fps 的效率不高:-(

Answer 1

我前段时间也运行遇到了同样的问题，但没有得到答案。原来是因为 background 的线性渐变属性不可设置动画，就像 background-img 一样。不过有一些解决方法：

将 2 个渐变堆叠在彼此之上，并为顶部的不透明度设置动画。这里有详细说明：https://medium.com/@dave_lunny/animating-css-gradients-using-only-css-d2fd7671e759
我使用的是创建一个 2 倍屏幕宽度的渐变，并为渐变的位置设置动画。

Answer 2

我认为在您的代码中，动画正在运行，但是您的两个线性渐变具有相同的颜色值，因此您看不到它在运行。简而言之，这就像将渐变从白色更改为白色，虽然有效，但没有视觉变化。相反，你可以试试这个：-

#div-text {
    display: flex;
    flex-direction: row;
    width: 80%;
    height: 80%;
    border-radius: 20px;
    background: #2d2e31;
  }

  .cl-button {
    font-family: 'Merienda One', monospace;
    order: 2;
    align-self: center;
    height: 80%;
    width: 60%;
    border: 0;
    background-color: transparent;
    color: aliceblue;
    font-size: 16px;
    margin-left: 10px;
    text-align: left;
  }


    #div-text:hover {
      animation: hover-animation 2s infinite ease-in;
  }
@keyframes hover-animation{
    0%{
      background: #2d2e31;
    }

    100%{
      background: linear-gradient(45deg,#36D8FF, #00acee, #66757f);
    }

}

我也是初学者，所以这不是一个完美的代码。因此，您可能想要对其进行更改。抱歉，如果我做了 mistake.Let 我知道结果如何。谢谢。

Answer 3

为此，您可以使用过渡，但过渡不适用于线性渐变，因此我在此处更改 opacity 的 ::after 伪元素。按钮名称不会显示为什么我使用 z-index 作为堆栈顺序。

#div-text {
    display: flex;
    flex-direction: row;
    width: 80%;
    height: 80%;
    border-radius: 20px;
    background: #2d2e31;
    position: relative;
    z-index: 1;
    overflow: hidden;
  }
  
  #div-text::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transition: opacity 1s ease;
    background: linear-gradient(45deg, #36D8FF, #00acee, #66757f);
    opacity: 0;
  }

  .cl-button {
    font-family: 'Merienda One', monospace;
    order: 2;
    align-self: center;
    height: 80%;
    width: 60%;
    border: 0;
    background-color: transparent;
    color: aliceblue;
    font-size: 16px;
    margin-left: 10px;
    text-align: left;
    position: relative;
    z-index: 3;
  }


    #div-text:hover::after{
      opacity: 1;
  }

<div id="div-text">
  <button id="button-text" class="cl-button">Text Here</button>
</div>

我想，对你会有帮助。

Answer 4

我相信这会有所帮助 You.I 刚刚更改了关键帧并将线性渐变放置在悬停部分。

 @keyframes div-text-hover {
            0% {
                background-position: 0% 50%;
            }
            50% {
                background-position: 100% 50%;
            }
            100% {
                background-position: 0% 50%;
            }
        }
        
        #div-text {
            display: flex;
            flex-direction: row;
            width: 80%;
            height: 80%;
            border-radius: 20px;
            background: #2d2e31;
        }
        
        .cl-button {
            font-family: 'Merienda One', monospace;
            order: 2;
            align-self: center;
            height: 80%;
            width: 60%;
            border: 0;
            background-color: transparent;
            color: aliceblue;
            font-size: 16px;
            margin-left: 10px;
            text-align: left;
        }
        
        #div-text:hover {
            background: linear-gradient(45deg, #36D8FF, #00acee, #66757f);
            background-size: 400% 400%;
            -webkit-animation: div-text-hover 2s ease infinite;
            animation: div-text-hover 2s ease infinite;
            animation-fill-mode: forwards;
        }

<!DOCTYPE html>
<html class="no-js">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="">
   
</head>

<body>

    <div id="div-text">
        <button id="button-text" class="cl-button">Text Here</button>
    </div>

</body>

</html>

如何仅使用 CSS 更改 DIV `background linear-gradient` on hover with fade effect？

How to change DIV `background linear-gradient` on hover with fade effect using CSS only?

html

css

linear-gradients