logo标签列表

使用纯CSS实现打字动画

htmlcss
3
嘿，我正在按照这个指南创建一个类型动画：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链接

非常感谢您的帮助！

3个回答
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>

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>

非常好，非常简单 :) - Arun Kumar
0

看一下

<!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>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接