炫酷CSS样式——实现动画文字效果

今天实现的是一个动画文字效果

效果如下

• .wrapper 类设置了样式，将其高度设置为视口高度（height: 100vh;），并使用 display: grid; 和 place-items: center; 属性将文本容器垂直水平居中。

• .typing-demo 类设置了文本容器的样式：

  • width: 22ch; 设置了容器的宽度，22ch就是22个字符。

  • animation 属性定义了两个关键帧动画： 第一个动画名称为 typing ，周期2s，steps 方法将动画分段，这个动画用来打字的效果；第二个动画名称为 blink ，用来实现光标的闪烁，infinite 意为无限循环，alternate 意为动画交替反向播放。

  • 其他样式 white-space: nowrap;、overflow: hidden;、border-right: 3px solid;、font-family 和 font-size 主要是控制文本容器的换行、溢出、边框和字体样式。

  • 下面是实现的代码

<template>
 <div class="wrapper">
      <div class="typing-demo">Hello World Hello jym</div>
    </div>
</template>
<script setup >
</script>
<style>
.wrapper {
  height: 100vh;

  display: grid;
  place-items: center;
}

.typing-demo {
  width: 22ch;
  animation: typing 2s steps(22), blink 0.5s step-end infinite alternate;
  white-space: nowrap;
  overflow: hidden;
  border-right: 3px solid;
  font-family: monospace;
  font-size: 2em;
}

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

@keyframes blink {
  50% {
    border-color: transparent;
  }
}

</style>