如何仅使用 CSS 创建“闪烁”文本？

Posted 2023-03-06

【中文标题】如何仅使用 CSS 创建“闪烁”文本？

【英文标题】：How to create "Blinking" text with CSS only?

【发布时间】：2017-09-28 23:26:21

【问题描述】：

我正在尝试为闪烁文本创建一个纯 CSS 的解决方案。文字应该说：

正在研究...

而且我希望它淡入淡出，给用户留下这样的印象，即它正在以与跳动的心脏相同的速度进行研究。

这是我目前的代码：

HTML：

<p class="blinking">Researching...</p>

CSS：

.blinking 
    transition: opacity 2s ease-in-out infinite;
  opacity: 1;


@keyframes opacity 
  0% 
    opacity: 1;
  

  50% 
    opacity: 0.5
  

  100% 
    opacity: 0;
  

但这不起作用，这也是针对chrome扩展的，所以只要它在最新版本的chrome中工作就足够了。

【问题讨论】：

用animation替换transition

把transition替换成动画，你也可以加alternatejsfiddle.net/Lg0wyt9u/1864

【参考方案1】：

应该这样做

.blinking 
    animation: mymove 2s infinite alternate;


@keyframes mymove 
    from opacity:0;
    to opacity: 1;

<p class="blinking">Researching...</p>

这是一个更流畅的动画

【参考方案2】：

您的问题是您在 1 行中使用了过渡和动画。

将您的transition 更改为animation，如下所示。还将不透明度更改为 1 -> 0 -> 1 而不是 1 -> 0.5 -> 0，因为您希望闪烁而不是 1 -> 0，而不是再次过渡到 1 不透明度。

小提琴：https://jsfiddle.net/kc6936cw/

.blinking 

    animation: opacity 2s ease-in-out infinite;
    opacity: 1;


@keyframes opacity 
  0% 
    opacity: 1;
  

  50% 
    opacity: 0
  

  100% 
    opacity: 1;
  

编辑： 也可以使用 jtmingus 注释：您还可以将 alternate 标签添加到末尾，而不是从 1 -> 0 -> 1。看起来像animation: opacity 2s ease-in-out infinite alternate;

【讨论】：

太棒了！就是这样。我会尽快接受你的回答。

您也可以将alternate 标签添加到末尾，而不是从 1 -> 0 -> 1。这看起来像 animation: opacity 2s ease-in-out infinite alternate;

【参考方案3】：

.blinking 
    transition: opacity 2s ease-in-out infinite;
    animation: blinker 1s linear infinite;
  opacity: 1;


@keyframes blinker 
  0% 
    opacity: 1;
  

  50% 
    opacity: 0.5
  

  100% 
    opacity: 0;
  

已经有一个很好的例子 How to make blinking/flashing text with css3?

【参考方案4】：

显然，应该使用animation 而不是transition。

.blinking 
  animation-name:animate;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  opacity: 1;


@keyframes animate 
  0% 
    opacity: 1;
  

  50% 
    opacity: 0.5
  

  100% 
    opacity: 0;