html - 打字动画使用纯css实现

Question

嘿，我正在按照本指南创建文字动画:http://lea.verou.me/2011/09/pure-css3-typing-animation-with-steps/ .但是我到了一个点，每个 div 元素之后都有闪烁的光标，但动画没有发生。 你们介意查看一下，看看可能是什么问题吗？

这是我的 HTML 结构:

<div class="line1">
    &lt;!DOCTYPE html><span>&nbsp;</span>
</div>
<div class="line2">
    &lt;html><span>&nbsp;</span>
</div>
<div class="line3">
    &emsp;&lt;head><span>&nbsp;</span>
</div>
<div class="line4">
    &emsp;&emsp;&lt;title&gt;
    <p>Welcome! :)</p>
    &lt;/title><span>&nbsp;</span>
</div>

这是一个jfiddle链接到我的 css 代码和 html 代码

非常感谢您的帮助!

Answer 1

试试这个简单的 CSS

p{
  color: #3D3F46;
  font-size: 20px;
  margin: 10px 0 0 10px;
  white-space: nowrap;
  overflow: hidden;
  width: 100%;
  animation: type 10s steps(60, end);
}

p:nth-child(2){
  animation: type2 8s steps(60, end);
}

p a{
  color: #3D3F46;
  text-decoration: none;
}

span{
  animation: blink 1s infinite;
}

@keyframes type{
  from { width: 0; }
}

@keyframes type2{
  0%{width: 0;}
  50%{width: 0;}
  100%{ width: 100; }
}

@keyframes blink{
  to{opacity: .0;}
}

<p>Hi  This is the sample text for typing effect using css <span>|</span></p>