背景色平滑变换

效果如图：

代码：

搜索框：

1
2
3
4
5
6
7
8
9
10
11
12
13
.trans {
  display: inline-block;
  padding: 1px 8px;
  -webkit-transition-property: background-color;
  -webkit-transition-duration: 0.3s;
  -webkit-transition-timing-function: ease;
}
.trans:hover {
  background-color: #486AAA;
  color: #fff;
}
/*使用*/
<a href="/" class="trans">经过我~~</a>

【页面效果】, 背景色平滑变换