html - CSS过渡-如何使文字从顶部出现？

我想用一些CSS转换在html中建立链接。
我想更改背景颜色和文本的颜色，这是我的实际工作代码：

.tdNavBar {
    background-color: #912b3d;
    color: white;
    text-align: center;
    width: 150px;
    height: 28px;
    cursor: pointer;

    -webkit-transition: color .4s, background-color .4s;
    -moz-transition: color .4s,background-color .4s;
    transition: color .4s, background-color .4s;
}

.tdNavBar:hover {
    background-color: white;
    color: #912b3d;
    text-align: center;
    width: 150px;
    height: 28px;
    cursor: pointer;

    -webkit-transition: color .4s, background-color .4s;
    -moz-transition: color .4s,background-color .4s;
    transition: color .4s, background-color .4s;
}

但是我想做一件事：我想要一个动画，使文本从顶部悬停在新颜色上，并替换旧文本，但是我不知道该怎么做。

JSFIDDLE：Link

有人能帮我吗？

最佳答案

尝试使用clip属性：

.tdNavBar {
  background-color: #912b3d;
  color: white;
  cursor: pointer;
  height: 28px;
  line-height: 28px;
  position: relative;
  text-align: center;
  width: 150px;
}
.tdNavBar:before, .tdNavBar:after {
  content: attr(title);
  display: block;
}
.tdNavBar:after {
  background-color: white;
  color: #912b3d;
  clip: rect(auto,auto,0px,auto);
  left: 0px;
  position: absolute;
  top: 0px;
  width: 100%;
  -webkit-transition: clip .4s;
  -moz-transition: clip .4s;
  transition: clip .4s;
}
.tdNavBar:hover:after {
  clip: rect(auto,auto,28px,auto);
}

<p class="tdNavBar" title="Hover Me"></p>

关于html - CSS过渡-如何使文字从顶部出现？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28406436/