如何向 :hover 元素添加动画？

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

Answer 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;}
 }
 
 
 }

<div class="bgchange"></div>

Answer 3

一种方法是使用 CSS 动画/关键帧。在这种情况下，关键帧被命名为

Change_Colour

。然后该动画在类的

hover

状态下切换。按下面的运行代码片段按钮查看结果：

.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;} 
}

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

Answer 4

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

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

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

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