使用CSS创建单词部分提升

Question

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

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

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

所以我的想法是-我彼此之间有2个div，一个div包含一个图形，在其下方，一个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;
}

Answer 2

使用CSS创建单词部分提升

使用这些代码行，您可以在要在HTML中使用的任何位置使用提升功能

.card-lift--hover:hover /*card lift effect*/
{
    transition: all .15s ease;
    transform: translateY(-20px);
}

<div class="testimonial card-lift--hover">
  <h2>Hello World</h2>
</div>

Answer 3

我在此演示中使用了两个div。看看DEMO。

CSS代码是

.main{position:relative;}
.logo{
background:url("http://placehold.it/100x100") no-repeat; 
width:100px;
height:100px;
position:absolute;
left:0;
top:0;
  z-index:-1;
}
.text{
color:Blue; font-size:5vh; 
position:absolute;
left:0;
top:0;
z-index:1;}

.logo:hover{ 
visibility:hidden;
opacity:0; 
transition:visibility 0.5s linear 0.5s, opacity 0.5s linear;
}

div.main:hover .text span{display:inline-block;color:red;
transform: translate(0,-10px); transition: all 0.5s ease-in-out;
}

HTML代码是

<div class="main">
  <div class="logo"><!-- To make SEO compactable Logo Text can be type here --></div>
  <div class="text">L<span>ogo</span></div>
</div>