悬停时更改三角形的颜色

debugcn 发表于 Dev

迪普希卡

我想创建一个简单的关键帧动画。我创建了一个三角形。将鼠标悬停在三角形上时，三角形的颜色会发生变化。最初三角形的颜色是红色，然后变成#9f1212，然后变成#2a60f4，最后变成黄色。完成动画后，三角形颜色变为红色。变色顺序：

red - #9f1212 - #2a60f4 - yellow - red

在黄色之后的上述顺序中，我想以相反的顺序重复颜色顺序，即在黄色变为#2a60f4然后变为#9f1212最终变为红色之后。

预期输出顺序：

red - #9f1212 - #2a60f4 - yellow -#2a60f4 - #9f1212- red

代码：

.triangle-up {
	width: 0;
	height: 0;
	border-left: 55px solid transparent;
	border-right: 55px solid transparent;
	border-bottom: 90px solid red;
}
.triangle-up:hover{
	border-bottom: 90px solid #fd7a7a;
    border-left: 55px solid transparent;
	border-right: 55px solid transparent;
      animation-name: example;
  animation-duration:4s;
}
@keyframes example {
 0% {
	border-bottom: 90px solid #9f1212;
  }
  50% {
	border-bottom: 90px solid #2a60f4;
  }
    100% {
	border-bottom: 90px solid yellow;
  }
}

<div class="triangle-up"></div>

我怎样才能得到预期的输出？任何帮助表示赞赏。

多姆森

您快到了。添加这两个：

animation-duration值为alternate来来回循环动画
animation-iteration-count值为infinite无限重复动画

查看更新的片段：

.triangle-up {
    width: 0;
    height: 0;
    border-left: 55px solid transparent;
    border-right: 55px solid transparent;
    border-bottom: 90px solid red;
}
.triangle-up:hover{
    border-bottom: 90px solid #fd7a7a;
    border-left: 55px solid transparent;
    border-right: 55px solid transparent;
    animation-name: example;
    animation-duration:4s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
}
@keyframes example {
    0% {
        border-bottom: 90px solid #9f1212;
    }
    50% {
        border-bottom: 90px solid #2a60f4;
    }
    100% {
        border-bottom: 90px solid yellow;
    }
}