letter-spacing与字符动效实例页面

展示

代码

• HTML：

  <div class="title">我是标题文字内容</div>

• CSS：

  .title {
    width: 8em;
    margin: auto;
    white-space: nowrap;
    animation: textIn 1s both;
  }
  @keyframes textIn {
    0% {
      opacity: 0;
      letter-spacing: -200px;
    }
    60% {
      letter-spacing: 5px;
    }
    100% {
      opacity: 1;
      letter-spacing: 0;
    }
  }