Question

我需要自动更改元素的颜色以无限运行，以下代码实现了我想要的效果，但只有当鼠标通过元素（div）时才能实现。我怎么能这样做，所以总是改变颜色？

谢谢和问候。

.box{
background-color: #900;
height: 50px;
width: 100px;
padding: 1em;
color: #fff;
font-weight: bold;
transition:background-color 3s linear;
-webkit-transition:background-color 3s linear;
-o-transition: background-color 3s linear;
-moz-transition: background-color 3s linear;
-ms-transition: background-color 3s linear;

}

.box:hover{
background-color: #090;


}

Answer 1

您可以使用CSS keyframes执行此操作。

@keyframes changeColor {
  0% {
    background-color: #900;
  }
  50% {
    background-color: #090;
  }
  100% {
    background-color: #900;
  }
}
.box {
  animation-name: changeColor;
  animation-iteration-count: infinite;
  animation-duration: 3s;
  background-color: #900;
  height: 50px;
  width: 100px;
  padding: 1em;
  color: #fff;
  font-weight: bold;
}

<div class="box"></div>

Answer 2

您可以使用css动画（关键帧）来实现此效果。读它here

.box {
  background-color: #900;
  height: 50px;
  width: 100px;
  padding: 1em;
  color: #fff;
  font-weight: bold;
  transition: background-color 3s linear;
  -webkit-transition: background-color 3s linear;
  -o-transition: background-color 3s linear;
  -moz-transition: background-color 3s linear;
  -ms-transition: background-color 3s linear;
}
@keyframes hoverme {
  0% {
    background-color: #900;
  }
  25% {
    background-color: red;
  }
  50% {
    background-color: green;
  }
  25% {
    background-color: red;
  }
  100% {
    background-color: #900;
  }
}
.box:hover {
  animation: hoverme 3s infinite;
}

<div class="box">
  Hover me :)
</div>

悬停时不间断的颜色变化

2 个答案: