css - 使用 LESS 实现平滑的颜色过渡

Question

我正在使用 LESS 来设计网页样式(使用 Bootstrap)。我想做的是当我将鼠标悬停在元素上时添加平滑的颜色过渡。这个功能不是在 LESS 中开箱即用吗？

我正在尝试这样做:

.list-group {
    .list-group-item:hover {
        background: fadein(@cn-sidemenu-hover-bg, 100%);
    }
    .list-group-item {
        background: @cn-sidemenu-bg;
        color: #fff;
    }
}

但是这个没有彩色动画。但是这个名字有点暗示我应该做某种彩色动画？

否则我看不出 fadein 和 lighten 有什么区别..

如何使用 LESS 实现平滑的颜色过渡？

Answer 1

您需要向 .list-group-item 类添加一个 transition 属性，例如:

.list-group-item{
background: @cn-sidemenu-bg;
color: #fff;
transition: background 500ms;
}

Transition 告诉浏览器在两个定义的属性之间进行插值。 fadein 和 lighten 是 LESS 特定的函数，它们只处理产生固定颜色值的颜色值。即这个lighten(#aa0000, 5) 将产生颜色值 #c30000；

淡入淡出与颜色操作相同，但会编辑不透明度值。