Question

我正在研究冠状病毒项目，但动画rot-corona无法正常工作，我希望它每3秒旋转360度并且其中包含了bootstrap-4注释

代码

/* SCSS */

#rotate-corona-text {
  h1 {
    font-size: 3rem;
  }
  img {
    width: 100px;
    height: 100px;
  }
  #rotate-corona-text {
    img {
      animation: rot-corona 3s linear infinite;
    }
  }
}

<section id="main-header" class="py-4">
  <div class="container py-4">
    <div class="row border py-4 align-items-center justify-content-between">
      <div class="col-12 col-md-4  order-2 order-lg-1  " id="unity-images">
      </div>
      <div class="col-12 col-md-7 order-1 order-lg-2" id="rotate-corona-text">
        <h1 class="text-primary">lets stay safe and fight against cor<span id="rotate-cororna"><img src="./assets/corona-icon.jpg"  alt=""></span>na </h1>
      </div>
    </div>
  </div>
</section>

对于我要旋转的图像为https://ibb.co/qFSqkyq

Answer 1

SCSS编译为此：

#rotate-corona-text h1 {
  font-size: 3rem;
}

#rotate-corona-text img {
  width: 100px;
  height: 100px;
}

#rotate-corona-text #rotate-corona-text img {
  animation: rot-corona 3s linear infinite;
}

请注意，第三条语句具有多个ID选择器，该选择器不选择所需的节点。

您缺少@keyframes来定义为img声明的动画。

输出：

#rotate-corona-text h1 {
  font-size: 3rem;
}

#rotate-corona-text img {
  width: 100px;
  height: 100px;
}

#rotate-corona-text img {
  animation: rot-corona 6s infinite; /* 6s because 50% is completed at 3s. */
}

@keyframes rot-corona {
  0% {
    transform: rotate(0);
  }
  50% {
    transform: rotate(360deg); /* CSS does not offer animation-delay between iterations. This is a hack */
  }
  100% {
    transform: rotate(360deg);
  }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<section id="main-header" class="py-4">
  <div class="container py-4">
    <div class="row border py-4 align-items-center justify-content-between">
      <div class="col-12 col-md-4  order-2 order-lg-1  " id="unity-images">
      </div>
      <div class="col-12 col-md-7 order-1 order-lg-2" id="rotate-corona-text">
        <h1 class="text-primary">Lets stay safe and fight against Cor<span id="rotate-cororna"><!-- Transparent background for you --><img src="https://i.stack.imgur.com/9Wifk.png"  alt=""></span>na </h1>
      </div>
    </div>
  </div>
</section>

为什么动画烂电晕无法正常工作？

1 个答案: