Css 文字动画

Question

我想制作这样的徽标（文字）动画：

我有这个标志（这是一个文本）：{K} 当用户打开一个页面（并且当光标结束）时，过渡是从 {K} ---> 到 {Katartika}。左括号是固定的，右括号往右走，露出整个单词。几秒钟后它回到 {K}。

Answer 1

您可以使用 CSS 过渡来做到这一点。我做的很快，也许这不是最好的解决方案，但这是我的第一个想法:

div {
  overflow: hidden;
  *zoom: 1;
}
span,
h1 {
  margin: 0;
  font-size: 1.6em;
  font-weight: bold;
  float: left;
  cursor: pointer;
}
h1 {
  width: 1.18em;
  overflow: hidden;
  transition: width 0.4s;
}
h1:hover {
  width: 4.24em;
}

<div>
  <h1>{Katarina</h1><span>}</span>
</div>
<p>^ HOVER ME! ^</p>

Css 文字动画

Css text animation

css

animation

text

transition