使用 CSS 创建单词部分提升答案

【问题标题】：Using CSS to create a word portion lift使用 CSS 创建单词部分提升
【发布时间】：2014-07-09 12:13:06
【问题描述】：

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

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

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

所以我的想法是 - 我有 2 个 div 一个在一个之上，一个包含一个图形，在它下面，一个包含一个单词。所以我想让顶部的 div 在悬停时消失，当显示底部的 div 时，我想使用 a 或其他东西将“word”的“ord”部分（例如）抬起一点。我怎样才能做到这一点？

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

谢谢！

【问题讨论】：

你能告诉我们你在 jsfiddle.net 中的代码吗
暂无代码，抱歉，这种情况我稍后再来。
您也可以将您的图片上传到任何图片上传网站：imgur.com等...并将链接粘贴到您的问题中。
刚刚做了。看看

标签： html css effects

【解决方案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;
}

【讨论】：

这行得通，但我的想法不是让 div 的文本和背景具有相同的颜色。我的意思是，它应该是 2 张卡片叠放在一起，当您将鼠标悬停在顶部时，它会消失，然后底部以 Lift 开头。
Tes，这个比较像。但是还有一个问题 - 我可以将单词和 div 包装到一个锚标记中，这样它就可以成为一个链接？还是这违反了 w3c 标准？
谢谢！ Aaaand 还有一件事 - 使用 div 是最佳实践，还是有更精简的方法？
@Tushar 你的 DEMO 有一些小故障；在框的右侧移动鼠标时，请在 DEMO 中查看；默认情况下，文本显示在顶部，而且您正在使用不必要的额外 div。不需要
@KheemaPandey 我看不到这样的问题。能详细点吗？

【解决方案2】：

我在这个 Demo 中使用了两个 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>

【讨论】：

【解决方案3】：

使用 CSS 创建单词部分提升

使用这些代码行，您可以在任何您想在 HTML 中使用的地方使用 lift 函数

.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>

【讨论】：