如何为css背景颜色更改添加过渡效果[关闭]答案

【问题标题】：How to add transition effect for css background-color change [closed]如何为css背景颜色更改添加过渡效果[关闭]
【发布时间】：2015-12-17 01:42:22
【问题描述】：

这是我的css代码：

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

如何在悬停事件上添加过渡。我不知道如何转换工作。一个小的描述性答案将不胜感激。

【问题讨论】：

任何简单的搜索引擎搜索都会为您找到所需的知识。由于作者明显的懒惰，这个问题应该被关闭。
哦，谢谢亲爱的。也许你懒得学习正确的语法
“hiw 转换工作” - “会受到赞赏”。你知道玻璃屋的说法吗？当你的大脑离开儿童阶段时回来。
再见，我只有 9 岁... :p

标签： css css-transitions

【解决方案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;
}

&lt;div id="btn"&gt;Hover me&lt;/div&gt;

【讨论】：

【解决方案2】：

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

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

SEE DEMO

【讨论】：