字體的動畫

樹不要皮必死無疑，人不要臉天下無敵。若是你此時正在被承受着不公平的待遇，不要傷心不要氣餒，吃虧要趁早。

.menu ul li a {
  position:relative;
  color: #FFFFFF;
  text-decoration: none;
  padding: 0;
  font-weight: 400;
  font-size: 1em;
  margin:0 10px;
}
.menu ul li a::before{
  position:absolute;
  top:0px;
  left:-10px;
  overflow:hidden;
  padding:0 10px;
  max-height:0;
  color:#7ccfd7;
  content:attr(data-hover);  /* <a href="" data-hover='HOME'>HOME</a> */
  transition:max-heihgt 0.5s; /* height會從0逐漸變爲a的高度 */
  -webkit-transition:max-height 0.5s;
}
.menu ul li a:hover::before{
  max-height:100%;
}