Question

https://codepen.io/codeispoetry/pen/dRKKEY

＆＃13;

.back {
  margin: 20px;
  padding: 100px;
  background: yellow;
  font-size: 30px;
}

＆＃13;

<div class="back">

  Fun place to stay. We got a golf cart to see the rest of the island, but the house is well-equipped and comfortable. Vanessa was kind to pick us up and make golf cart rental arrangements. We were here on our honeymoon, it was perfect for a memorable trip!
  Hosts easily available

</div>

＆＃13;

我希望黄色背景随着时间的推移而变黄，但我希望通过CSS来做。 StackOverflow上有足够的解决方案可以使用Jquery，但我们可以通过CSS实现这一点，以便它可以在所有浏览器上运行。

https://www.w3schools.com/css/css3_animations.asp我试过这个，但它回滚到原来的颜色。如何使颜色永久化。

Answer 1

您可以使用keyframe animation：

@keyframes background-change {
    to { background-color: hotpink; }
}

.block {
    animation: background-change 900ms forwards;
}

Answer 2

使用以下更新的代码。你需要添加'animation-fill-mode：forwards'来完成动画后停止动画。

.back {
    margin: 20px;
    padding: 100px;
    font-size: 30px;
    background-color: yellow;
    -webkit-animation-name: example; 
    -webkit-animation-duration: 4s; 
    animation-name: example;
    animation-duration: 4s;
    -webkit-animation-fill-mode: forwards; /* Safari 4.0 - 8.0 */
     animation-fill-mode: forwards;
}
@-webkit-keyframes example {
    from {background-color: yellow;}
    to {background-color: white;}
}

@keyframes example {
    from {background-color: yellow;}
    to {background-color: white;}
}

Answer 3

.back {
  margin:20px;
  padding: 100px;
  font-size: 30px;
  animation-name: changeColor;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

@-webkit-keyframes changeColor {
  0% {
    background-color: yellow;
  }
  50% {
    background-color: white;
  }
  100%{
    background-color: yellow;
  }
}



@keyframes changeColor {
  0% {
    background-color: yellow;
  }
  50% {
    background-color: white;
  }
  100%{
    background-color: yellow;
  }
}

它会将变化颜色的无限时间从黄色变为白色，变回黄色，使其看起来更光滑。

Answer 4

这可能是您正在寻找的。

.block {
    background-color: yellow;
}

.block:hover {
    background-color: white;
    -webkit-transition: background-color 1000ms linear;
    -ms-transition: background-color 1000ms linear;
    transition: background-color 1000ms linear;
}

Answer 5

试试这段代码

.back {
  margin: 20px;
  padding: 100px;
  // background: yellow;
  font-size: 30px;
}

div {
  background-color: red;
  -webkit-animation-name: example;
  /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 4s;
  /* Safari 4.0 - 8.0 */
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}


/* Safari 4.0 - 8.0 */

@-webkit-keyframes example {
  from {
    background-color: red;
  }
  to {
    background-color: yellow;
  }
}


/* Standard syntax */

@keyframes example {
  from {
    background-color: red;
  }
  to {
    background-color: yellow;
  }
}

<div class="back">

  Fun place to stay. We got a golf cart to see the rest of the island, but the house is well-equipped and comfortable. Vanessa was kind to pick us up and make golf cart rental arrangements. We were here on our honeymoon, it was perfect for a memorable trip!
  Hosts easily available

</div>

几秒内没有JQuery

5 个答案: