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

前端未结

关注

 4  1422

孤独总比滥情好

相关标签:

4条回答

名媛妹妹

2021-01-28 23:10

I am sure This will help You.I just changed the keyframe and place that linear-gradiant in hover section.

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

0 讨论(0)

夕颜

2021-01-28 23:17

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.

0 讨论(0)

情书的邮戳

2021-01-28 23:23
I also ran into same problem a while ago, and didn't get an answer. Turns out it is because background's linear gradient property is not animatable, just like background-img. There are some workarounds though:
1. Stack 2 gradients on top of each other and animate the opacity of the top one. This is given in detail here : https://medium.com/@dave_lunny/animating-css-gradients-using-only-css-d2fd7671e759
2. What I used is that create a gradient that is 2 times the width of screen and animate the position of the gradient.
0 讨论(0)
发布评论:

提交评论
- 加载中...

没有蜡笔的小新

2021-01-28 23:25

I think in your code, the animation is working but your both the linear gradients have same values of color, hence you cant see it working. In short it is like changing gradient from white to white, which is working but there is no visual change. Instead you can try this :-

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

}

I too am a beginer so this is not a perfect code. So you might want to make changes to it. And sorry if i have made any mistake.Let me know how it works out. Thank you.

0 讨论(0)

热议问题