色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

如何在Javascript中設置CSS關鍵幀？

CSS
劉柏宏1年前8瀏覽0評論

我有一個如下所示的CSS關鍵幀，我的問題是我想把它設置為JavaScript(放在已經有一些函數的div中)，這樣我就可以把“元素”值返回給我的函數

.cylon-eye {
  background-color: yellow;
  background-image: linear-gradient( to right, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.9) 75%);
  color: none;
  height: 100%;
  width: 20%;
  animation: 4s linear 0s infinite alternate move-eye;
}
@keyframes move-eye {
  from {
    margin-left: -20%;
  }
  to {
    margin-left: 100%;
  }
}

讓我與你分享兩個片段，一個是使用CSS + javascript，另一個是只使用javascript，你可以使用任何你喜歡的。希望對你有幫助。

使用JAVASCRIPT

let dynamicStyles = null;

function addAnimation(body) {
  if (!dynamicStyles) {
    dynamicStyles = document.createElement('style');
    dynamicStyles.type = 'text/css';
    document.head.appendChild(dynamicStyles);
  }

  dynamicStyles.sheet.insertRule(body, dynamicStyles.length);
}

addAnimation(`
      @keyframes move-eye { 
         from {
           margin-left: -20%;
         }
        to {
          margin-left: 100%;
        }
      }
    `);



var element = document.createElement("div");
element.className = "cylon-eye";
element.style.height = "50px";
element.style.width = "50px";
element.style.backgroundImage = "linear-gradient(to right,rgba(255, 0, 0, 0.1) 25%,rgba(255, 0, 0) 50%,rgba(255, 0, 0, 0.1) 75%)";
element.style.animation = "4s linear 0s infinite alternate move-eye";

document.body.appendChild(element);

現在可以使用該方法了。animate()如本例所示

document.getElementById("tunnel").animate([
  // key frames
  { transform: 'translateY(0px)' },
  { transform: 'translateY(-300px)' }
], {
  // sync options
  duration: 1000,
  iterations: Infinity
});

文檔:

https://developer . Mozilla . org/en-US/docs/Web/API/Element/animate https://developer . Mozilla . org/en-US/docs/Web/API/Web _ Animations _ API/key frame _ Formats(眨眼效果示例) 這對我來說很好，希望這將有所幫助:)

var style = document.createElement('style');
style.type = 'text/css';
var keyFrames = '\
@keyframes slidein {\
  from {\
    margin-left: 100%;\
    width: 300%; \
  }\

  to {\
    margin-left: 0%;\
    width: 100%;\
  }\
}';

document.getElementsById('slideDiv')[0].appendChild(style);

明智的做法是使用原生API功能來修改CSS樣式表。您可以使用以下方法訪問現有的樣式表

document.styleSheets[0].cssRules

這將返回所有應用的規則，您將能夠在selectorText與您的選擇器匹配的地方編輯規則

你試過用& ltstyle & gt& lt/style & gt；標簽？

例如:

const loading = document.querySelector('.loading');
const keyFrames = document.createElement("style");

keyFrames.innerHTML = `
  @keyframes loading {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  .loading {
    animation: loading 1s ease infinite;
  }
`;

loading.appendChild(keyFrames);

.loading {
  width: 100px;
  height: 100px;
  background-size: cover;
  background-image: url('https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fmedia.24ways.org%2F2009%2F15%2Fassets%2Fimg%2Fspinner.png&f=1&nofb=1');
  background-repeat: no-repeat;
}

<!doctype html>
<html>
  <head>
    <title>Keyframes in js</title>
  </head>
  <body>
    <div class="loading"></div>
  </body>
</html>