技術標籤：csscss

這裡為什麼要動態加呢？因為在@keyframes中px無法轉化為vw，所以需要動態計算，計算完成之後再將@keyframes insertRule到style中

const myFirstkeyframes = `@-webkit-keyframes myfirst{
                            0% {
                              margin-top: ${marginTopOne}vw;
                            }
                            50% {
                              margin-top: 
 
${marginTopTwo}vw;
                            }
                            100% {
                              margin-top: ${marginTopOne}vw;
                            }
                        }`;
      const style = document.createElement("style");
      style.setAttribute("type"
 
, "text/css");
      document.head.appendChild(style);
      const sheet = style.sheet;
      sheet.insertRule(myFirstkeyframes, 0);
      
      
 .cate-btn-top {
    animation: myfirst 0.4s infinite;
    -moz-animation: myfirst 0.4s infinite; /* Firefox */
  }

注意：在ios中首屏展示的動畫採用insertRule這種方式增加的動畫不動，需要使用v-if/v-show控制元素展示隱藏

如果哪位朋友有深入的瞭解，歡迎留言交流 共同進步