Question

因此，我正在尝试对我的投资组合网站上的某些文本实施悬停状态动画。简而言之，文本需要从黑色或白色（可以更改），白色，蓝色动画。

我尝试使用类似以下的内容

@keyframes textAnimation {
    0% {
        color: inherit
    }
    50% {
        color: white
    }
    100% {
        color: blue
    }
}

但是，因为它是一个悬停动画-如果我停止悬停，该动画将被剪切并恢复为之前的值。我有一个随附的动画（纯CSS）与悬停一起使用，因此我需要它来将动画基本上恢复到原始值。

我也尝试过使用<span>向setTimeout添加类...但是，这是一个非常密集的页面，并且根据过去的经验，以这种方式混合JS + CSS-拥有完美的时机-在低端计算机上超级难。

PS我正在使用React.js

任何想法都将不胜感激。

Answer 1

在这里，颜色从白色变为蓝色，再变为黑色，但是您可以使用任何颜色。仅通过CSS来反转动画是非常困难的，因此，一点点js的帮助就大有帮助。希望对您有帮助！

    let node = document.getElementsByClassName("notesColor1"); //returns an array of all matching elements
    node[0].addEventListener("mouseover",function(){
    	node[0].classList.add("forward");
      node[0].classList.remove("backward");

      
    });
    node[0].addEventListener("mouseout",function(){
    	node[0].classList.add("backward");
      node[0].classList.remove("forward");

    });

.notesColor1{
  color:white;
  background-color:grey;
  font-size:2rem;
}

.forward{
    animation:anim 1s ease forwards;
}
.backward{
    animation:anim-reverse 1s ease;
}
   
   
   @keyframes anim{
     0%{
       color:white;
     }
     50%{
       color:blue;
     }
     100%{
       color:black;
     }
     
   }
   @keyframes anim-reverse{
     0%{
              color:black;

     }
     50%{
              color:blue;
     }
     100%{
              color:white;

     }
   }

         <div class='notesColor1'>notest1</div>

Answer 2

您可以尝试使用transtran进行渐变着色：

.text {
   background-image: 
   linear-gradient(to bottom, currentcolor , white, blue);
  background-clip: text;
  color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  background-size:100% 1000%;
  background-position:top;
  background-repeat:no-repeat;
  font-size: 70px;
  transition:1s all;
}
.text:hover {
  background-position:bottom;
}
body {
 background:pink;
}

<span class="text" style="color:red">Some text</span>
<span class="text" style="color:black">Some text</span>

Answer 3

您可以添加一个简单的js，用于在悬停事件检查时进行检查：如果它具有类，请将其删除并添加 b类，否则删除b类并添加a类。

CSS文本颜色过渡到多个值

3 个答案: