Question

我想制作一个DIV背景（没有背景颜色）闪烁红色然后再次空白。现在我使用JS将新的CLASS（添加红色）添加到有问题的DIV和CSS3中，为背景颜色添加一个缓动。但它减轻了它，我想要的是它去RED然后放松。我想我可以通过使用JS在延迟后添加多个CLass来做到这一点。但CSS3可以用来完全做到这一点吗？

Answer 1

如果您想要突出显示，可能需要使用CSS3动画。旧版浏览器不支持它们。请检查caniuse。

我创建了一个简短的示例over here。

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

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

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

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

CSS3过渡想要添加颜色并淡化它

2 个答案: