如何仅使用CSS更改带有淡入淡出效果的悬停时DIV的“背景线性渐变"? [英] How to change DIV `background linear-gradient` on hover with fade effect using CSS only?

问题描述

首先，我说的是 background ，而不是 background-color .我环顾了堆栈溢出问题，但

我希望在没有Jquery或其他任何功能的情况下，纯CSS不会让背景缓慢渐入淡出.就像我们使用 background-color .我发现无法使用 background 来做到这一点.

编辑:我尝试每10％添加@keyframes，但每帧仍会急剧改变不透明度.输入60行相同的行以获得60fps效率不高:-(

解决方案

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

 #div-text {显示:flex;flex-direction:行；宽度:80％;高度:80％;border-radius:20px;背景:#2d2e31;职位:相对z索引:1；溢出:隐藏；}#div-text :: after {内容: "";位置:绝对；左:0；最高:0;宽度:100％;高度:100％;过渡:不透明1s缓解；背景:线性渐变(45deg，#36D8FF，#00acee，#66757f);不透明度:0；}.cl-button {字体家族:'Merienda One'，等宽字体；顺序:2；自我定位:居中；高度:80％;宽度:60％;边界:0;背景色:透明；颜色:aliceblue;font-size:16px;左边距:10px;文字对齐:左；职位:相对z索引:3；}#div-text:hover :: after {不透明度:1；}  

 < div id ="div-text">< button id ="button-text" class ="cl-button">此处文字</button></div>  

我认为，这将对您有所帮助.

First of all, I'm talking of background and not background-color. I looked around on stack-overflow but this solution but this is for images. Though I won't prefer creating an image of gradient and using this method. It might just blur up the original image as the image size would be variable.

The fade effect I want works with background-color but there seems no way to use linear-gradient in background color.

Here is my code:

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

When I hover my mouse on the DIV it should change the background to the above gradient with FADE effect. But when I hover, the background changes instantly like this:

I want that background to fade-in slowly and not so sharply with pure CSS without Jquery or anything else. Just like when we use background-color . I found no way to do this with background.

EDIT: I tried out adding @keyframes every 10% and it's still sharply changes opacity every frame. And it's not efficient to type of the same lines 60 times to get 60fps :-(

解决方案

For this, you can use transition but transition does not work for linear-gradient so I'm changing here opacity of ::after pseudo element. button name will not show that why i used z-index for stack order.

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

I think, it will be helpful for you.

这篇关于如何仅使用CSS更改带有淡入淡出效果的悬停时DIV的“背景线性渐变"?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！