动画编写html、css答案

【问题标题】：Animated writing html, css [closed]动画编写html、css
【发布时间】：2021-09-07 11:11:57
【问题描述】：

我想创建一个动画文字，它是使用 html 和 css 逐个字符地编写和消除的。我知道关于 html 和 css 的非常基本的东西，所以我没有尝试过任何东西。如果有人可以帮助我，将不胜感激。

【问题讨论】：

Stackoverflow 用于询问代码特定的问题。您的问题太宽泛了，无法得到任何好的答案。
请编辑问题以将其限制为具有足够详细信息的特定问题，以确定适当的答案。

【解决方案1】：

我在pmallol 的codepen 中找到了一个很酷的参考，可以满足您的需求。您也可以使用它并获得keyframes 的基本知识，以制作您自己的自定义动画。

body {
  background: hsl(217.6,100%,80%);
  font-family: monospace;
  padding-top: 5em;
  display: flex;
  flex-flow: wrap column;
  justify-content: center;
  align-items: center;
}

.typewriter {
  background-color: #fff;
  min-width: 500px;
  padding: 1em 2em 1em 1.5em;
  border: solid 1px #e6e6e6;
  border-radius: 2.8em;
  box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.25);
  margin: 2em;
  display: flex;
  align-items: center;
}

.typewriter svg {
  padding-right: 2em;
}

.typewriter p {
  color: #000;
  font-size: 1.5em;
  font-weight: 500;
  width: 0;
  max-width: max-content;
  overflow: hidden; 
  border-right: .05em solid #464545; /* The typwriter cursor */
  white-space: nowrap; /* Keeps the content on a single line */
  margin: 0; /* Gives that scrolling effect as the typing happens */
}

.typing-erase {
  animation: 
    4s typing-erase 4s steps(50, end) infinite,
    blink-caret .5s step-end infinite;
}

/* The type and erase effect */
@keyframes typing-erase {
  0% { width: 0 }
  80% { width: 100% }
  90%, 100% { width: 0 }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: gray }
}

<!-- 
  Type and erase effect using just CSS.

  Forked from https://codepen.io/geoffgraham/pen/jrWwWM
-->
<h1>Type and erase - CSS animation</h1>

<div class="typewriter">
  <!-- Search icon by https://www.flaticon.com/authors/good-ware -->
  <svg id="search-icon" xmlns="http://www.w3.org/2000/svg" height="16px" version="1.1" viewBox="-1 0 136 136" width="16px">
    <g id="surface1">
    <path d="M 93.148438 80.832031 C 109.5 57.742188 104.03125 25.769531 80.941406 9.421875 C 57.851562 -6.925781 25.878906 -1.460938 9.53125 21.632812 C -6.816406 44.722656 -1.351562 76.691406 21.742188 93.039062 C 38.222656 104.707031 60.011719 105.605469 77.394531 95.339844 L 115.164062 132.882812 C 119.242188 137.175781 126.027344 137.347656 130.320312 133.269531 C 134.613281 129.195312 134.785156 122.410156 130.710938 118.117188 C 130.582031 117.980469 130.457031 117.855469 130.320312 117.726562 Z M 51.308594 84.332031 C 33.0625 84.335938 18.269531 69.554688 18.257812 51.308594 C 18.253906 33.0625 33.035156 18.269531 51.285156 18.261719 C 69.507812 18.253906 84.292969 33.011719 84.328125 51.234375 C 84.359375 69.484375 69.585938 84.300781 51.332031 84.332031 C 51.324219 84.332031 51.320312 84.332031 51.308594 84.332031 Z M 51.308594 84.332031 " style=" stroke:none;fill-rule:nonzero;fill:#464545;fill-opacity:1;" /></g></svg>
  <p class="typing-erase">How to animate text</p>
</div>

【讨论】：