CSS动画字母b看起来像o

Question

CSS中是否可以通过动画将小写字母b转换为o？请任何帮助将是巨大的。

Answer 1

尝试一下

<div class="container">
  <span class="b">b</span>
  <span class="o">o</span>
</div>

.container{
  position: relative;
}

span {
  display: block;
  font-size: 50px;
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  transition: all 750ms ease
}

.o {
  opacity: 0;
  z-index: 1;
}

.b {
  z-index: 2;
}

.b:hover{
  opacity: 0
}

.b:hover ~ .o {
  opacity: 1
}