css - CSS3 过渡想要添加颜色并将其淡化

Question

我想让一个 DIV 背景（没有背景颜色）闪烁红色，然后再次变为空白。现在我已经使用 JS 向有问题的 DIV 添加了一个新的 CLASS（它添加了红色），并使用 CSS3 为背景颜色添加了缓动。但它可以缓解它，我想要的是它变成红色然后缓解。我想我可以通过使用 JS 在延迟后添加多个 CLass 来做到这一点。但是 CSS3 能完全做到这一点吗？

Answer 1

如果你想要像高亮一样的东西，你可能想要使用 CSS3 动画。旧版浏览器不支持它们。检查caniuse。

单击链接时会调用突出显示。这是 CSS（没有供应商前缀）：

@keyframes highlight {
    0% {
        background: red
    }
    100% {
        background: none;
    }
}

#highlight:target {
    animation: highlight 1s;
}

<div id="highlight"><a href="#highlight">Highlight</a></div>

Answer 2

一种方法是使用 jQuery UI animate 方法，该方法扩展了“普通”jQuery animate() 以影响背景颜色等内容。

像这样的转换在 css3 中是可能的，但显然没有那么广泛的浏览器支持。

#maDiv {
   -webkit-transition:background-color 0.5s linear;
   -moz-transition: background-color 0.5s linear;
   -o-transition: background-color 0.5s linear;
   height: 20px;
   width: 20px;
   background:#000;
}

#maDiv:hover {
    background: #ff0;
}

这将在用户悬停 Div 时淡出颜色，并在鼠标离开时淡出，超过 0.5 秒。有关浏览器支持的详细信息，请参阅此处的“css3 转换”：http: //www.html5rocks.com/en/features/presentation