键入多行的效果 [英] Typing effect for multiple lines

问题描述

我正在尝试为我的段落添加打字效果。
我发现这个不错的链接
它很适合一行文本。但我试图达到的是一个多行的段落。

I am trying to add typing effect to my paragraph. I found this nice link It works nicely for one line text. But what I am trying to reach is a paragraph with multiple lines.

white-space:nowrap;

这个css使文本成为一行，但没有那个nowrap，效果看起来很奇怪。
任何人都有想法？

JSFiddle
HTML：

this css makes the text into one line, but without that nowrap, the effect looks weird. Anyone has an idea?
JSFiddle HTML:

<div class="css-typing">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>

CSS：

CSS:

.css-typing {
    width: 200px;
    white-space:nowrap;
    overflow:hidden;
    -webkit-animation: type 2s steps(50, end);
    animation: type 5s steps(50, end);
}

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

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

推荐答案

终于得到它与纯css
的工作这里是3行的源代码，但它很容易扩展到
多达你想要的。重要的一行是添加动画
delay，接下来的动画填充模式forward是非常重要的，因为我将opacity
设置为0，所以在每次动画完成后线会消失，最后
in @关键帧类型2和3从不透明度0到1在1处为1％，使其看起来像
，但它并没有淡入。我不是CSS专家，但希望这能帮助未来的某个人。

I had the same issue finally got it working with pure css here is the source code for 3 lines but its easy to extend to as many as you would like. the important lines are adding the animation delay, next animation fill mode forward is important because I set opacity to 0 so line would disappear with out it after each animation is done, finally in @keyframes type2 and 3 going from opacity 0 to 1 with 1% at 1 make it look like it not fading in. I am no CSS expert but hope this helps someone in the future.

.css-typing
{   
    font-family: "Courier";
    font-size: 14px;
    width: 50em;
    white-space:nowrap;
    overflow:hidden;
    -webkit-animation: type 5s steps(40, end);
    animation: type 5s steps(40, end);
}

.css-typing:nth-child(2)
{
    white-space:nowrap;
    overflow:hidden;    
    opacity:0;
    -webkit-animation: type 5s steps(40, end);
    animation: type2 5s steps(40, end);
    -webkit-animation-delay: 5s; 
    animation-delay: 5s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
.css-typing:nth-child(3){
    white-space:nowrap;
    overflow:hidden;
    opacity:0;
    -webkit-animation: type 5s steps(40, end);
    animation: type3 5s steps(40, end);
    -webkit-animation-delay: 10s; 
    animation-delay: 10s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

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

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

span{
  animation: blink 1s infinite;
}

@keyframes type2{
0%{width: 0;}
from {opacity:0;}
1%{opacity:1;}
to{opacity:1;}
100%{opacity:1;}
}
@-webkit-keyframes type2{
0%{width: 0;}
from {opacity:0;}
1%{opacity:1;}
to{opacity:1;}
100%{opacity:1;}
}  
@keyframes type3{
  0%{width: 0;}
  from {opacity:0;}
1%{opacity:1;}
to{opacity:1;}
100%{opacity:1;}

} 
@-webkit-keyframes type3{
  0%{width: 0;}
  from {opacity:0;}
1%{opacity:1;}
to{opacity:1;}
100%{opacity:1;}
}  

这篇关于键入多行的效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！