如何将动画添加到 :hover 元素？答案

【问题标题】：How do I add animation to a :hover element?如何将动画添加到 :hover 元素？
【发布时间】：2021-07-09 19:56:47
【问题描述】：

我需要一个 :hover 元素，当它被悬停时，会导致背景颜色在五种颜色之间变化。这是我现在正在使用的代码。

<div class="background_changer">
      </div>
.background_changer :hover {
}

我知道这没什么好做的，但是对我应该调整的内容有所帮助会很棒。

【问题讨论】：

标签： html css animation hover

【解决方案1】：

您需要像这样将animation 属性添加到.background_changer:hover 选择器：-

以下代码将背景颜色更改为 5 种不同的颜色，但您也可以通过简单地在 @keyframes 内平均分配百分比来将其更改为或多或少的颜色。

.background_changer{
  height:100px;
  width:100px;
  background-color: black;
  cursor:pointer;
}

.background_changer:hover{
  animation: glow linear 2s infinite;
}

@-webkit-keyframes glow { 
    0% { background-color:red; }
    25% { background-color:orange; }
    50% { background-color:green; }
    75% { background-color:blue; }
    100% { background-color:indigo; } 
}

@keyframes glow { 
    0% { background-color:red; }
    25% { background-color:orange; }
    50% { background-color:green; }
    75% { background-color:blue; }
    100% { background-color:indigo; } 
}

<div class="background_changer">
</div>

【讨论】：

【解决方案2】：

您正在寻找的是@keyframes，下面的代码应该可以实现您想要的。

.bgchange {
  width: 300px;
  height: 300px;
  background: red;
}

.bgchange:hover {
  animation: anim 5s infinite;
}


@keyframes anim {
 
 0% {
 background: red;}
 
 20% {
 background: blue;}
 
 40% {
 background: green;}
 
 60% {
 background: orange;}
 
 80% {
  background: yellow;}
  
  100%{
  background: pink;}
 }
 
 
 }

&lt;div class="bgchange"&gt;&lt;/div&gt;

【讨论】：

【解决方案3】：

一种方法是使用 CSS 动画/关键帧。在这种情况下，关键帧被命名为Change_Colour。然后在类的hover 状态下切换此动画。按下面的Run code sn-p按钮查看结果：

.background_changer{
  height: 5rem;
  width: 5rem;
  background-color: red;
}

.background_changer:hover{
  animation: Change_Colour 1s infinite;
}

@keyframes Change_Colour {
  0% {background-color: red;}
  20% {background-color: orange;}
  40% {background-color: yellow;}
  60% {background-color: green;}
  80% {background-color: blue;}
  100% {background-color: red;} 
}

&lt;div class="background_changer"&gt;&lt;/div&gt;

【讨论】：

【解决方案4】：

这是一个没有关键帧的想法：

.background_changer{
  height: 5rem;
  width: 5rem;
  background:
   linear-gradient(90deg,
     red    0 20%,
     blue   0 40%,
     green  0 60%, 
     yellow 0 80%,
     purple 0) 
   left/500% 100%;
  transition:1s steps(4); /* 4 inside steps not 5 */
}

.background_changer:hover{
  background-position:right;
}

&lt;div class="background_changer"&gt;&lt;/div&gt;

【讨论】：