【问题标题】:Change the keyframes value of css with jQuery使用 jQuery 更改 css 的关键帧值
【发布时间】:2021-07-09 23:16:38
【问题描述】:

有没有办法用jQuery改变@keyframes (CSS)的值

为了更清楚一点,我在我的 css 文件中有这个:

@keyframes bg {
  50% { background: #3b99fcff; }
}

.pie::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  width: 50%; height: 100%;
  border-radius: 0 100% 100% 0 / 50%;
  background-color: inherit;
  transform-origin: left;
  animation: spin 50s linear infinite,
             bg 100s step-end infinite;
  animation-play-state: paused;
  animation-delay: inherit;
}

我想用 Jquery 改变“背景”

【问题讨论】:

标签: javascript jquery html css


【解决方案1】:

您可以使用 CSS variable 并更改它:

setTimeout(() => {
  console.log("changing");
  document.getElementById("fizz").style.setProperty("--foo", "green");
}, 2000);
:root {
  --foo: blue;
}

@keyframes hello {
  from {
    background-color: yellow;
  }
  to {
    background-color: var(--foo);
  }
}

#fizz {
  height: 1em;
  animation: 1s infinite alternate hello;
}
<div id="fizz">
  <div>

【讨论】:

  • IE 呢?它会在这里失败;)
  • 嗨@zero298。这是有效的!差不多吧。我在 Firefox 和 Chrome 中进行了测试,但仅适用于 Firefox
猜你喜欢
  • 2012-01-09
  • 2018-07-19
  • 2022-06-28
  • 1970-01-01
  • 2017-01-26
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多