Question

我们，我尝试过很多不起作用的东西。我有一个带有闪烁光标的css动画。我正试图在我正在开发的游戏中使用它。

链接游戏以获取视觉参考：https://code.sololearn.com/WF65X6DEns7o/#css

+++

所以这里的代码是一个问题

HTML：

   <div id = "Header"> <b>Real Estate Agent</b> </div>

CSS：

#Header{
font-size:50px; color:darkOrange; text-shadow:3px 3pxblack;
overflow:hidden; 
letter-spacing: .15em;
animation: typing 3.5s steps(60, end), blink-caret .65s step-end infinite; 
white-space: nowrap; 
border-right: .15em solid orange;
width:500px;
}

 @keyframes typing {
  from { width: 0 }
   to { width: 500px }
   }

@keyframes blink-caret {
from, to { border-color: orange }
 50% { border-color: transparent; }
   }

+++++++++++++

当前光标闪烁，直到所有文字都完成输入，然后它在文字末尾闪烁。

如何让光标在动画结束处停止闪烁并停止动画循环。

正如我所说，我已经尝试了一些事情，但没有任何工作。

感谢

Answer 1

从#Header：

的动画中删除单词infinite

animation: typing 3.5s steps(60, end), blink-caret .65s step-end;

Answer 2

将infinite替换为8（试验您喜欢的值），并将边框的初始颜色设置为transparent。

animation: typing 3.5s steps(60, end), blink-caret .65s step-end 8; 
white-space: nowrap; 
border-right: .15em solid transparent;

这样它会闪烁8次然后变得不可见。

Answer 3

尝试删除infinite，如下所示：

animation: typing 3.5s steps(60, end), blink-caret .65s step-end;

Answer 4

试试这个：

#Header{
    font-size:50px; color:darkOrange; text-shadow:3px 3px black; overflow: hidden; letter-spacing: .15em;
    animation: typing 3.5s steps(60, end), blink-caret .65s step-end 5; white-space: nowrap; 
    width:500px;
}

@keyframes typing {
  from { width: 0 }
  to { width: 500px }
}

@keyframes blink-caret {
  from, to { border-color: transparent; }
  50% { border-right: .15em solid orange; }
}

在css动画结束时停止闪烁的光标

4 个答案: