html - 用于淡化背景颜色的 CSS 动画

Question

有没有办法使按钮的背景颜色在悬停时从一种颜色变为另一种颜色并具有淡入淡出效果？我知道这可以在 javascript 中完成，但我宁愿为此只使用 css。

Answer 1

CSS3 transition property是您的解决方案。

.btn {
  background-color: lightblue;
  -webkit-transition: all 0.3s ease-out;  /* Saf3.2+, Chrome */
     -moz-transition: all 0.3s ease-out;  /* FF4+ */
      -ms-transition: all 0.3s ease-out;  /* IE10 */
       -o-transition: all 0.3s ease-out;  /* Opera 10.5+ */
          transition: all 0.3s ease-out;
}  

.btn:hover {
  background-color: lightgreen;  
}