←如何在不使用 JavaScript 的情况下创建 CSS 画廊
如何使用 CSS 跨浏览器添加垂直文本→

添加 CSS

  • 为确保每个字符具有相同的宽度并使字母之间的过渡感觉像物理键入，请将 font-family 属性设置为“等宽”。
  • 使用 letter-spacing 定义字母之间的间距并添加边距。
  • 将溢出属性设置为其“隐藏”值以隐藏超出元素宽度的内容。
  • 通过使用带有“nowrap”值的 white-space 属性来防止文本分成两行。
  • 添加 border-right 属性。

这将是文本末尾的闪烁光标。闪烁效果将通过将动画应用到我们的边框来创建。

  • 使用 animation 属性添加动画。

我们可以自由选择时间长度和步数。

  • 定义动画的关键帧。

第一个用于打字，另一个用于光标。

.typewriter h1 {
  font-family: monospace;
  letter-spacing: .17em;
  margin: 0 auto;
  overflow: hidden;
  white-space: nowrap;
  border-right: .17em solid pink;
  animation: typing 3.5s steps(30, end), blinking-cursor .5s step-end infinite;
}
@keyframes typing {
  from {
    width: 0
  }
  to {
    width: 100%
  }
}
@keyframes blinking-cursor {
  from,
  to {
    border-color: transparent
  }
  50% {
    border-color: pink;
  }
}

现在是我们将所有内容放在一起并查看结果的时候了。

创建打字机文本的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      .typewriter h1 {
        font-family: monospace;/* Web-safe typewriter-like font */
        overflow: hidden;/* Ensures the content is not revealed until the animation */
        border-right: .17em solid pink;/* The typewriter cursor */
        white-space: nowrap;/* Keeps the content on a single line */
        margin: 0 auto;/* Gives that scrolling effect as the typing happens */
        letter-spacing: .17em;/* Adjust as needed */
        animation: typing 3.5s steps(30, end), blinking-cursor .5s step-end infinite;
      }
      /* The typing effect */
      @keyframes typing {
        from {
          width: 0
        }
        to {
          width: 100%
        }
      }
      /* The typewriter cursor effect */
      @keyframes blinking-cursor {
        from,
        to {
          border-color: transparent
        }
        50% {
          border-color: pink;
        }
      }
    </style>
  </head>
  <body>
    <div class="typewriter">
      <h1>Once upon a time...</h1>
    </div>
  </body>
</html>

使用动画、动画填充模式和动画延迟属性创建打字机文本的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      .content p {
        border-right: .15em solid orange;
        font-family: "Courier";
        font-size: 14px;
        white-space: nowrap;
        overflow: hidden;
      }
      .content p:nth-child(1) {
        width: 7.3em;
        -webkit-animation: type 2s steps(40, end);
        animation: type 2s steps(40, end);
        -webkit-animation-fill-mode: forwards;
        animation-fill-mode: forwards;
      }
      .content p:nth-child(2) {
        width: 11.5em;
        opacity: 0;
        -webkit-animation: type2 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;
      }
      .content p:nth-child(3) {
        width: 7.3em;
        opacity: 0;
        -webkit-animation: type3 5s steps(20, end), blink .5s step-end infinite alternate;
        animation: type3 5s steps(20, end), blink .5s step-end infinite alternate;
        -webkit-animation-delay: 4s;
        animation-delay: 4s;
        -webkit-animation-fill-mode: forwards;
        animation-fill-mode: forwards;
      }
      @keyframes type {
        0% {
          width: 0;
        }
        99.9% {
          border-right: .15em solid #82B533;
        }
        100% {
          border: none;
        }
      }
      @-webkit-keyframes type {
        0% {
          width: 0;
        }
        99.9% {
          border-right: .15em solid #82B533;
        }
        100% {
          border: none;
        }
      }
      @keyframes type2 {
        0% {
          width: 0;
        }
        1% {
          opacity: 1;
        }
        99.9% {
          border-right: .15em solid #82B533;
        }
        100% {
          opacity: 1;
          border: none;
        }
      }
      @-webkit-keyframes type2 {
        0% {
          width: 0;
        }
        1% {
          opacity: 1;
        }
        99.9% {
          border-right: .15em solid #82B533;
        }
        100% {
          opacity: 1;
          border: none;
        }
      }
      @keyframes type3 {
        0% {
          width: 0;
        }
        1% {
          opacity: 1;
        }
        100% {
          opacity: 1;
        }
      }
      @-webkit-keyframes type3 {
        0% {
          width: 0;
        }
        1% {
          opacity: 1;
        }
        100% {
          opacity: 1;
        }
      }
      @keyframes blink {
        50% {
          border-color: transparent;
        }
      }
      @-webkit-keyframes blink {
        50% {
          border-color: tranparent;
        }
      }
    </style>
  </head>
  <body>
    <div class="content">
      <p>
        Lorem Ipsum
      </p>
      <p>
        Lorem ipsum is simply a false texte...
      </p>
      <p>
        Lorem Ipsum
      </p>
    </div>
  </body>
</html>

创建带有样式光标的打字机文本的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      body {
        padding: 40px;
        background-color: #666666;
      }
      #main {
        height: 40px;
        white-space: nowrap;
        overflow: hidden;
        font-family: 'Source Code Pro', monospace;
        font-size: 28px;
        color: rgba(255, 255, 255, .70);
        position: relative;
      }
      #border {
        border-bottom: solid 3px rgba(0, 255, 0, .75);
        position: absolute;
        right: -7px;
        width: 20px;
      }
      /* Animation */
      #main {
        animation: animated-text 2s steps(30, end) 1s 1 normal both
      }
      #border {
        animation: animated-cursor 600ms steps(30, end) infinite;
      }
      /* text animation */
      @keyframes animated-text {
        from {
          width: 0;
        }
        to {
          width: 480px;
        }
      }
      /* cursor animations */
      @keyframes animated-cursor {
        from {
          border-bottom-color: rgba(0, 255, 0, .75);
        }
        to {
          border-bottom-color: transparent;
        }
      }
    </style>
  </head>
  <body>
    <div id="main">
      Once upon a time...
      <div id="border"></div>
    </div>
  </body>
</html>

添加没有打字效果的光标示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      body {
        padding: 40px;
        background-color: #8EBF43;
      }
      p {
        white-space: nowrap;
        overflow: hidden;
        font-family: 'Source Code Pro', monospace;
        font-size: 28px;
        color: rgba(255, 255, 255, .70);
      }
      /* Animation */
      p {
        animation: animated-text 3s steps(30, end) 1s 1 normal both;
      }
      /* text animation */
      @keyframes animated-text {
        from {
          width: 0;
        }
        to {
          width: 472px;
        }
      }
    </style>
  </head>
  <body>
    <p>今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里。</p>
  </body>
</html>

添加带有闪烁光标的流畅打字效果的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      body {
        padding: 40px;
        background-color: #c13b17;
      }
      p {
        border-right: solid 5px rgba(255, 255, 255, .75);
        white-space: nowrap;
        overflow: hidden;
        font-family: 'Source Code Pro', monospace;
        font-size: 28px;
        color: rgba(255, 255, 255, .70);
      }
      /* Animation */
      p {
        animation: animated-text 4s linear 1s 1 normal both, animated-cursor 600ms linear infinite;
      }
      /* text animation */
      @keyframes animated-text {
        from {
          width: 0;
        }
        to {
          width: 456px;
        }
      }
      /* cursor animations */
      @keyframes animated-cursor {
        from {
          border-right-color: rgba(255, 255, 255, .75);
        }
        to {
          border-right-color: transparent;
        }
      }
    </style>
  </head>
  <body>
    <p>To be or not to be</p>
  </body>
</html>

创建向左移动的打字机文本的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      body {
        padding: 40px;
        background-color: #121212;
      }
      p {
        border-right: solid 3px rgba(0, 255, 0, .75);
        white-space: nowrap;
        overflow: hidden;
        font-family: 'Source Code Pro', monospace;
        font-size: 28px;
        color: rgba(255, 255, 255, .70);
        position: absolute;
        right: 10px;
      }
      /* Animation */
      p {
        animation: animated-text 4s steps(17, end) 1s 1 normal both, animated-cursor 600ms steps(17, end) infinite;
      }
      /* text animation */
      @keyframes animated-text {
        from {
          width: 0;
        }
        to {
          width: 286px;
        }
      }
      /* cursor animations */
      @keyframes animated-cursor {
        from {
          border-right-color: rgba(0, 255, 0, .75);
        }
        to {
          border-right-color: transparent;
        }
      }
    </style>
  </head>
  <body>
    <p>I am being typed.</p>
  </body>
</html>

添加带有交替文本的打字机效果的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      body {
        background-color: #71718c;
        color: #ffffff;
        font-size: 100px;
      }
      h1 {
        font-size: 30px;
      }
      .text-1 {
        animation: text1;
      }
      .text-2 {
        animation: text2;
      }
      .text-1,
      .text-2 {
        overflow: hidden;
        white-space: nowrap;
        display: inline-block;
        position: relative;
        animation-duration: 20s;
        animation-timing-function: steps(25, end);
        animation-iteration-count: infinite;
      }
      .text-1::after,
      .text-2::after {
        content: "|";
        position: absolute;
        right: 0;
        animation: caret infinite;
        animation-duration: 1s;
        animation-timing-function: steps(1, end);
      }
      @keyframes text2 {
        0%,
        50%,
        100% {
          width: 0;
        }
        60%,
        90% {
          width: 21.2em;
        }
      }
      @keyframes text1 {
        0%,
        50%,
        100% {
          width: 0;
        }
        10%,
        40% {
          width: 17em;
        }
      }
      @keyframes caret {
        0%,
        100% {
          opacity: 0;
        }
        50% {
          opacity: 1;
        }
      }
    </style>
  </head>
  <body>
    <h1>
      <span class="text-1">经历过风雨，才懂得阳光的温暖。</span>
      <span class="text-2">今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里。</span>
    </h1>
  </body>
</html>

创建 HTML

  • 使用具有类名称“打字机”的 <div> 元素。
  • 在 <div> 中添加标题 (<h1>)。
<div class="typewriter">
  <h1>Once upon a time.</h1>
</div>
如何使用纯 CSS 创建打字机文本

我们会同意，看起来像是在屏幕上输入的文本看起来很有吸引力。
我们是否知道可以使用纯 CSS 将打字机效果应用于文本？
现在我们要一起做，一步一步！

日期：2020-06-02 22:15:02 来源：oir作者：oir
←如何在不使用 JavaScript 的情况下创建 CSS 画廊
如何使用 CSS 跨浏览器添加垂直文本→

目录

Copyright © 2017-2019 OnITRoad.com All rights reserved.  桂ICP备20001160号-1  关于 | 隐私和政策