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>

以下是我的css代码和html代码的jfiddle链接

非常感谢你的帮助！

Answer 1

你可以试试这个简单的片段，我们需要定义动画部分，如下所示

@-webkit-keyframes typing {
    from { width: 0 }
    to { width:16.3em }
}

@-moz-keyframes typing {
    from { width: 0 }
    to { width:16.3em }
}

@-webkit-keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: black }
}

@-moz-keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: black }
}

body { font-family: Consolas, monospace; }

h1 { 
    font-size:150%;
    width:16.3em;
    white-space:nowrap;
    overflow:hidden;
    border-right: .1em solid black;
    
    -webkit-animation: typing 17s steps(30, end), /* # of steps = # of characters */
                        blink-caret 1s step-end infinite;
    -moz-animation: typing 17s steps(30, end), /* # of steps = # of characters */
                        blink-caret 1s step-end infinite;
}
h2 { 
    font-size:150%;
    width:16.3em;
    white-space:nowrap;
    overflow:hidden;
    border-right: .1em solid black;
    
    -webkit-animation: typing 17s steps(30, end), /* # of steps = # of characters */
                        blink-caret 1s step-end infinite;
    -moz-animation: typing 17s steps(30, end), /* # of steps = # of characters */
                        blink-caret 1s step-end infinite;
}
h3 { 
    font-size:150%;
    width:16.3em;
    white-space:nowrap;
    overflow:hidden;
    border-right: .1em solid black;
    
    -webkit-animation: typing 17s steps(30, end), /* # of steps = # of characters */
                        blink-caret 1s step-end infinite;
    -moz-animation: typing 17s steps(30, end), /* # of steps = # of characters */
                        blink-caret 1s step-end infinite;
}

<h1>Typing animation is working </h1>
<h2>Typing animation is working </h2>
<h3>Typing animation is working </h3>

Answer 2

试试这个简单的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>

Answer 3

看看

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
@-webkit-keyframes typing {
    from { width: 0 }
    to { width:710px; }
}

@-moz-keyframes typing {
    from { width: 0 }
    to {width:710px; }
}

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

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

body { font-family: Consolas, monospace; }

h1 { 
    font-size:150%;
    width:710px;
    white-space:nowrap;
    overflow:hidden;
    border-right: .1em solid black;

    -webkit-animation: typing 17s steps(30, end), /* # of steps = # of characters */
                        blink-caret 1s step-end infinite;
    -moz-animation: typing 17s steps(30, end), /* # of steps = # of characters */
                        blink-caret 1s step-end infinite;
}
</style>
</head>

<body>
<h1>  
&lt;!DOCTYPE html><span>&nbsp;</span>&lt;html><span>&nbsp;</span>&emsp;&lt;head><span>&nbsp;</span>&emsp;&emsp;&lt;title&gt;Welcome! :)&lt;</title><span>&nbsp;</h1>
</body>
</html>

使用纯css实现键入动画

3 个答案: