html - 使用 CSS 创建单词部分提升

Question

我正在尝试为 Logo 创建特定效果，但我真的不知道它是如何工作的。

这是我在 photoshop 中绘制的草图:

http://s28.postimg.org/nrb3k6grh/effect.gif

所以我的想法是 - 我有 2 个 div，一个包含一个图形，另一个包含一个词。所以我想让顶部的 div 在悬停时消失，当显示底部的 div 时，我想使用 a 或其他东西将“word”的“ord”部分(例如)提升一点。我怎样才能做到这一点？

虽然我不确定这两个 div 部分。如果有更好的方法，请分享。

谢谢!

Answer 1

检查是否this为你工作

HTML

 <a href="" class="logo">
    W<span class="text">ord</span>
  <span class="overlay"></span>
</a>

CSS

 .logo {
  color: red;
  font-size: 60px;
  font-family: arial;
  text-transform: uppercase;
  height: 200px;
  width: 200px;
  text-decoration: none;
  line-height: 200px;
  display: block;
  position: relative;
}
.overlay {
  -moz-transition: opacity 0.5s;
  -webkit-transition: opacity 0.5s;
  transition: opacity 0.5s;
  position: absolute;
  left: 0;
  top: 0;
  height: 200px;
  width: 200px;
  background: red;
  opacity: 1;

}
.logo:hover .overlay {
  opacity: 0
}
.logo:hover {
  background: none
}
.logo .text {
  position: relative;
  top: 0;
  -moz-transition: top 0.5s 0.5s;
  -webkit-transition: top 0.5s 0.5s;
  transition: top 0.5s 0.5s;
}
.logo:hover .text {
  top: -30px;
}