如何添加过渡效果的css背景颜色的变化

Question

下面是我的css代码:

#btn {background-color:red; color:blue;}
#btn:hover {background-color:green;}

如何在悬停事件上添加过渡。我不知道过渡期是怎么起作用的。

Answer 1

使transition: background-color transition-duration timing-function处于正常状态。

#btn {
  background-color: #288FB4;
  transition: background-color 1s ease; /* Add */
}
#btn:hover {
  background-color: #5A67A6;
}

输出:

#btn {
  background-color: #288FB4;
  color: #fff;
  font-weight: bold;
  width: 100px;
  text-align: center;
  padding: 10px;
  transition: background-color 1s ease; /* Add */
}
#btn:hover {
  background-color: #5A67A6;
}

<div id="btn">Hover me</div>

Answer 2

你需要使用的CSS过渡属性。

#btn {
  background-color: #999;
  transition: background-color 1s ease; /* ease, ease-in, ease-in-out*/
}
#btn:hover {
  background-color: #ddd;
}

<<p> 看到演示/strong>