css blink不闪烁_使它闪烁HTML教程–如何使用Blink标签以及代码示例

css blink不闪烁

In the earlier days of the web, HTML elements like the blink tag were native ways to add some animation effects to liven up a webpage. How can we use those animations today to add flare to our websites and apps?

在网络的早期，诸如眨眼标记之类HTML元素是添加一些动画效果以使网页生动活泼的原生方法。 我们今天如何使用这些动画来向我们的网站和应用添加耀斑？

• What is the HTML tag blink?

  什么是HTML标记闪烁？

• How do you use the blink tag?

  您如何使用眨眼标记？

• Can you still use the blink tag?

  您还可以使用眨眼标签吗？

• Recreating the blink tag with CSS animations

  用CSS动画重新创建眨眼标签

什么是HTML标记闪烁？ (What is the HTML tag blink?)

The blink tag (<blink>) is an obsolete HTML tag that makes the content of that tag slowly flash.

blink标签( <blink> )是一个过时HTML标签，使该标签的内容缓慢闪烁。

This, along with some other obsolete tags like the marquee tag (<marquee>), were an easy way to add simple animation effects to your site.

这与其他一些过时的标记(例如字幕标记( <marquee> ))一起是向网站添加简单动画效果的简便方法。

您如何使用眨眼标记？ (How do you use the blink tag?)

Being that the blink tag was a simple HTML element, you would use it right in line with your content.

由于blink标签是一个简单HTML元素，因此可以根据您的内容使用它。

For example, if you wanted the word "blink" in blink-182 to blink, you would write the following HTML:

例如，如果希望blink-182中的“ blink”一词闪烁，则可以编写以下HTML：

<p>
  <blink>blink</blink>-182
</p>

您还可以使用眨眼标签吗？ (Can you still use the blink tag?)

As you might have noticed in the gif above, this tag is obsolete.

如您在上面的gif中可能已经注意到的，此标记已过时。

This means you can’t use the blink HTML tag itself. However, that shouldn't stop us from remaking it in all of its blinking glory.

这意味着您不能使用眨眼HTML标记本身。 但是，这并不应该阻止我们重新制造它的所有闪光点。

Note: the Blink tag was deprecated due to accessibility concerns. Please do your research before trying to use a solution that provides the same effect, as we should all be making an effort to make our projects as inclusive as possible.

注意：由于可访问性的考虑，不建议使用Blink标记。 在尝试使用可提供相同效果的解决方案之前，请先进行研究 ，因为我们所有人都应努力使我们的项目尽可能地具有包容性。

用CSS动画重新创建眨眼标签 (Recreating the blink tag with CSS animations)

In today’s web development world, animations are generally handled with CSS or JavaScript. Using CSS animations, we can recreate our blink tag with a few lines and be back in business.

在当今的Web开发世界中，动画通常使用CSS或JavaScript处理。 使用CSS动画，我们可以用几行代码重新创建眨眼标记，然后重新开始营业。

With the following CSS:

使用以下CSS：

.blink {
  animation: blink 1s steps(1, end) infinite;
}

@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

You can add the .blink class to any HTML element to make it blink.

您可以将.blink类添加到任何HTML元素以使其闪烁。

<p>
  <span class="blink">blink</span>-182
</p>

现代化眨眼标记 (Modernizing the blink tag)

This is 2020, what if we wanted something a little smoother?

这是2020年，如果我们想要更平滑的东西怎么办？

Well to start, we can make the animation fade by removing the steps from the animation definitions.

首先，我们可以通过删除动画定义中的steps来使动画淡出。

.blink {
  animation: blink 1s infinite;
}

Or what if we wanted to make it fade out like a sci-fi effect?

或者，如果我们想使其像科幻效果那样淡出，该怎么办？

.blink {
  animation: blink 3s infinite;
}

@keyframes blink {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    color: blue;
  }
}

Or even a nice grow and fade effect.

甚至还有不错的增长和淡入淡出效果。

.blink {
  animation: blink 3s infinite;
}

@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
    transform: scale(2);
  }
  51% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

使用CSS控制动画 (Taking control of animations with CSS)

Though you might not be able to use the blink tag, you still have a lot of options. CSS provides a ton of animation options natively, so whether you want to recreate your favorite HTML pastime or recreate the Alien title sequence, the possibilities are virtually endless.

尽管您可能无法使用眨眼标签，但仍有很多选择。 CSS本身提供了大量的动画选项，因此，无论您是想重新创建自己喜欢HTML消遣还是重新创建Alien标题序列 ，其可能性几乎是无限的。

• 🐦 Follow Me On Twitter

  Twitter在Twitter上关注我

• 📽️ Subscribe To My Youtube

  Subscribe️订阅我的YouTube

• ✉️ Sign Up For My Newsletter

  ✉️注册我的时事通讯

翻译自: https://www.freecodecamp.org/news/make-it-blink-html-tutorial-how-to-use-the-blink-tag-with-code-examples/

css blink不闪烁