转圈闪烁 js实现

<template>
  <div class="app-container">
    <el-divider />

    <div id="t1" class="t1">1</div>

    <el-divider />
    <el-divider />
    <el-divider />
    <div id="t2" class="t2">2</div>
  </div>
</template>

<script setup>
onMounted(() => {
  // t1转圈
  const element1 = document.getElementById("t1");
  element1.style.height = "40px";
  element1.style.width = "100px";
  element1.style.background = "red";
  element1.style.animation = "rotate 2s infinite linear";

  const styleSheet1 = document.createElement("style");
  styleSheet1.innerHTML = `
    @keyframes rotate {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
    }
  `;
  document.head.appendChild(styleSheet1);

  // t2闪烁
  const element2 = document.getElementById("t2");
  element2.style.height = "40px";
  element2.style.width = "100px";
  element2.style.background = "red";
  element2.style.animation = "blink 1s infinite";

  const styleSheet2 = document.createElement("style");
  styleSheet2.innerHTML = `
  @keyframes blink {
    0% {
      opacity: 1;
    }
    50% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  `;
  document.head.appendChild(styleSheet2);
});
</script>