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;

fadein对颜色操作做了同样的事情，但编辑了不透明度值。

使用LESS平滑颜色过渡

1 个答案: