如何仅使用 CSS 在具有淡入淡出效果的悬停时更改 DIV `background linear-gradient`？ [复制]

Posted 2023-03-06

技术标签:

【中文标题】如何仅使用 CSS 在具有淡入淡出效果的悬停时更改 DIV `background linear-gradient`？ [复制]【英文标题】：How to change DIV `background linear-gradient` on hover with fade effect using CSS only? [duplicate] 【发布时间】：2020-08-14 10:30:42 【问题描述】：

首先，我说的是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 效果的上述渐变。但是当我悬停时，背景会立即改变如下：

我希望背景在没有 Jquery 或其他任何东西的情况下使用纯 CSS 慢慢淡入，而不是那么尖锐。就像我们使用background-color .我发现没有办法用background 做到这一点。

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

【问题讨论】：

你应该使用 transition: 2s ease-in-out;代替动画：2s；在#div-文本中。 【参考方案1】：

为此，您可以使用过渡，但过渡不适用于线性渐变，所以我在这里更改 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>

我想，这对你会有帮助。

【讨论】：

这就是我想要的。但是你能帮我多一点吗。当我在我的实际代码中添加它时，蓝色背景会包裹整个屏幕，而不仅仅是按钮。简而言之，它超出了DIV元素。有什么原因吗？你在#div-text中使用过position: relative吗？如果您添加了，请分享您的代码。请check my code here【参考方案2】：

我相信这会对你有所帮助。我只是更改了关键帧并将线性渐变放在悬停部分。

 @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>

【讨论】：

后悬停动画正是我想要的。但是当我将鼠标悬停在按钮上时，它会立即变成蓝色。我希望这种过渡也具有这种淡化效果。就像从灰色慢慢变成蓝色一样。尝试改变动画持续时间并添加动画延迟。动画延迟只是在动画之前增加了一些时间。但它仍然会很尖锐。我试过了。【参考方案3】：

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

将 2 个渐变堆叠在一起，并为顶部的不透明度设置动画。这在这里详细给出：https://medium.com/@dave_lunny/animating-css-gradients-using-only-css-d2fd7671e759

我使用的是创建一个 2 倍屏幕宽度的渐变，并为渐变的位置设置动画。

【讨论】：

我会马上试一试，然后告诉你结果。我不知道为什么它对我不起作用，所以我复制粘贴整个内容并检查仍然对我不起作用:-( 能否贴出问题的截图，为什么不工作【参考方案4】：

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

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

我也是一个初学者，所以这不是一个完美的代码。因此，您可能希望对其进行更改。对不起，如果我犯了任何错误。让我知道它是如何工作的。谢谢。

【讨论】：

不幸的是，这不起作用。 div 保持 [#2d2e31] 直到 99% 的动画，并在动画的最后几个时刻急剧转变为我的问题中的 gif。您是否尝试过不透明度？在缓和，线性等方面。尝试了 0% 的不透明度 0 和 100% 的不透明度 1。没用。不透明度也急剧变化好吧。那不好意思了。如果我找到什么我会告诉你的。谢谢。

以上是关于如何仅使用 CSS 在具有淡入淡出效果的悬停时更改 DIV `background linear-gradient`？ [复制]的主要内容，如果未能解决你的问题，请参考以下文章

在列表项悬停时更改图像时添加淡入/淡出效果的问题

在多个列表项上使用淡入淡出 jQuery 淡入淡出效果更改图像源

在 CSS 悬停事件中，我可以使用淡入淡出更改另一个 div 的样式吗？

jQuery在悬停时更改（带有淡入淡出动画）div的背景图像

使用悬停/淡入淡出折叠菜单

css 框 - 图标加 - 悬停淡入淡出效果