Question

我试图让这个h3在悬停时淡出。有人可以帮助我吗？

HTML

<h3 class="clicker">test</h3>

CSS

.clicker {
    -moz-transition:color .2s ease-in;
    -o-transition:color .2s ease-in;
    -webkit-transition:color .2s ease-in;
    background:#f5f5f5;padding:20px;
}

.clicker:hover{
    background:#eee;
}

Answer 1

你想褪色的是什么？ background或color属性？

目前您正在更改背景颜色，但要告诉它转换颜色属性。您可以使用all转换所有属性。

.clicker { 
    -moz-transition: all .2s ease-in;
    -o-transition: all .2s ease-in;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
    background: #f5f5f5; 
    padding: 20px;
}

.clicker:hover { 
    background: #eee;
}

否则只需使用transition: background .2s ease-in。

Answer 2

为了具有像荧光笔之类的过渡效果，只是为了突出显示文本并淡化bg颜色，我们使用了以下内容：

.field-error {
    color: #f44336;
    padding: 2px 5px;
    position: absolute;
    font-size: small;
    background-color: white;
}

.highlighter {
    animation: fadeoutBg 3s; /***Transition delay 3s fadeout is class***/
    -moz-animation: fadeoutBg 3s; /* Firefox */
    -webkit-animation: fadeoutBg 3s; /* Safari and Chrome */
    -o-animation: fadeoutBg 3s; /* Opera */
}

@keyframes fadeoutBg {
    from { background-color: lightgreen; } /** from color **/
    to { background-color: white; } /** to color **/
}

@-moz-keyframes fadeoutBg { /* Firefox */
    from { background-color: lightgreen; }
    to { background-color: white; }
}

@-webkit-keyframes fadeoutBg { /* Safari and Chrome */
    from { background-color: lightgreen; }
    to { background-color: white; }
}

@-o-keyframes fadeoutBg { /* Opera */
    from { background-color: lightgreen; }
    to { background-color: white; }
}

<div class="field-error highlighter">File name already exists.</div>

悬停时过渡颜色褪色？

2 个答案: