如何在同一个动画中使用不同的背景颜色？

Question

在我的导航栏上，我有 4 个不同的按钮，当我将它们悬停时，我希望每个按钮都具有不同的颜色。

这里是用于动画的代码：

.hvr-underline {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
position: relative;
}

.hvr-underline:before {
   content: "";
   position: absolute;
   z-index: -1;
   left: 50%;
   right: 50%;
   bottom: 0;
   background: #2098d1;
   height: 4px;
   -webkit-transition-property: left, right;
   transition-property: left, right;
   -webkit-transition-duration: 0.3s;
   transition-duration: 0.3s;
   -webkit-transition-timing-function: ease-out;
   transition-timing-function: ease-out;
}

.hvr-underline:hover:before, .hvr-underline:focus:before, .hvr-underline:active:before {
   left: 0;
   right: 0;
}

我希望每个按钮在动画中都具有不同的颜色，而不是所有四个按钮都具有相同的蓝色。

Answer 1

您可以将另一个 class 名称添加到您现有的 class 名称中，例如

<li class="hvr-underline blue"><a href="#">Button1</a></li>
<li class="hvr-underline green"><a href="#">Button2</a></li>
<li class="hvr-underline red"><a href="#">Button3</a></li>
<li class="hvr-underline yellow"><a href="#">Button4</a></li>

在 CSS 中，您可以添加另一个定义，例如

.hvr-underline.blue:before {
    background:blue;
}

.hvr-underline.green:before {
    background:green;
}

http://jsfiddle.net/34hsjLc7/4/

如何在同一个动画中使用不同的背景颜色？

How can I have different background colors in the same animation?

css

animation

background

colors

animated