css 悬停颜色过渡循环

Question

我想创建悬停颜色过渡，但我希望它保持循环。我是黄色过渡到红色然后变回黄色等等。

我不知道如何循环它。我需要添加 javascript 吗？如果有怎么办？

    body {
        background-color: #FF0;
        padding: 15x;
        font-family: "Helvetica Neue",sans-serif;
}

    body:hover {
        background-color: #AD310B;
        -webkit-transition: background-color 1000ms linear;
        -ms-transition: background-color 1000ms linear;
        transition: background-color 1000ms linear;
        animation-iteration-count: 3;

}

Answer 1

您需要使用 CSS animation 和关键帧来无限循环，而不是 transition 属性。这是一个例子：

div {
  background-color: pink;
}

div:hover {
  animation: change-color 2s infinite;
}

@keyframes change-color {
  0% {
    background-color: pink;
  }
  50% {
    background-color: yellow;
  }
}

<div>Hover me</div>

css 悬停颜色过渡循环

css hover color transition loop

html

javascript

css

visual-web-developer