Question

我正在尝试为我的段落添加打字效果。我发现这很好link 它适用于一行文本。但我想要达到的是一个多行的段落。

white-space:nowrap;

这个css使文本成一行，但如果没有那个现在，效果看起来很奇怪。有人有想法吗？
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-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; }
}

Answer 1

我有同样的问题终于让它与纯CSS一起工作这是3行的源代码，但很容易扩展到尽可能多的你想要的。重要的一行是添加动画延迟，下一个动画填充模式前进很重要，因为我设置了不透明度为了0，所以在每个动画完成后，最终会使线条消失在@keyframes中，type2和3从不透明度0变为1，1％为1，使它看起来像它没有消失。我不是CSS专家，但希望这有助于将来。

.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;}
}

Answer 2

这可能就是你要找的东西

Fiddle

var spans = '<span>' + str.split('').join('</span><span>') + '</span>';
$(spans).hide().appendTo('.css-typing').each(function (i) {
    $(this).delay(100 * i).css({
        display: 'inline',
        opacity: 0
    }).animate({
        opacity: 1
    }, 100);
});

使用持续时间设置

Answer 3

完整的CSS具有插入符号的多行类型效果，例如具有不同的延迟和速度。

Codepen示例：css键入多行https://codepen.io/Bojoer/pen/EZYgeO

<div class="css-typing">
  <p>
    Typed text 1
  </p>
  <p>
    Typed text 2
  </p>
  <p>
    Typed text 3
  </p>
</div>

<style>
.css-typing p {
  font-family: "Courier";
  font-size: 14px;
  width: 7.3em;
  white-space: nowrap;
  overflow: hidden;
  -webkit-animation: type 2s steps(40, end);
  animation: type 2s steps(40, end);
  border-right: .15em solid orange;
}

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

.css-typing p: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: 3s;
  animation-delay: 3s;
  -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;
  }
}
</style>

多行键入效果

3 个答案: