Question

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

这是我在photoshop中做的草图：

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

所以我的想法是 - 我有两个div在一个之上，一个包含一个图形，在它下面，一个包含一个单词。因此，我想在悬停时使顶部div消失，当底部显示时，我想用“或”某种东西将“单词”（例如）的“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>

使用CSS创建单词部分提升

3 个答案:

使用CSS创建单词部分提升