CSS3悬停文本幻灯片效果(示例)

・3 分钟阅读

色彩,摄影和精细动画的大量运用,所以这个教程诞生了。

这个页面查看按钮悬停动画工作的方式,滑动文本显示另一个文本(在Wacom网站的情况下)的方法,

演示

代码

首先将HTML用于按钮。


<div class="blue-btn">
 <a class="first-link" href="">
 First Text
 </a>
 <a href="">
 Second Text
 </a>
</div>

就这么多,别的都是CSS ,
我会在这里放出所有最终的代码,并且解释某些。


a{
 color: white;
 text-decoration:none;
 text-align: center;
 display:block; /* important */
}

.blue-btn, .first-link{
 -webkit-transition: 0.3s;
 -moz-transition: 0.3s;
 -ms-transition: 0.3s;
 transition: 0.3s; 
}

.blue-btn{
 height: 64px;
 font: normal normal 700 1em/4em Arial,sans-serif;
 overflow: hidden;
 width: 200px;
 background-color: #3b5998;
}

.blue-btn:hover{
 background-color: #003D99;
}

.blue-btn a:hover{
 text-decoration: none;
}

.first-link{
 margin-top: 0em; 
}

.blue-btn:hover .first-link{
 margin-top: -4em;
}

CSS解释


a{
 color: white;
 text-decoration:none;
 text-align: center;
 display:block; /* important */
} 

**显示块**这里非常重要,因为我在评论中说垂直定位按钮,一个在另一个之上。


.blue-btn{
 height: 64px;
 width: 200px;
 font: normal normal 700 1em/4em Arial,sans-serif;
 overflow: hidden;
 background-color: #3b5998;
}

必须指定**高度和宽度 overflow必须是**隐藏**,因此你无法看到'第二文本'按钮(查看html ),字体(4em )的线高度在按钮中垂直居中,但是,这可能会根据高度而改变。


.blue-btn, .first-link{
 -webkit-transition: 0.3s;
 -moz-transition: 0.3s;
 -ms-transition: 0.3s;
 transition: 0.3s; 
}

CSS3转换(请注意没有-o-前缀,因为Opera现在支持webkit),没有这个按钮,按钮就会弹出,而且不是幻灯片,我相信你能在js中做到这一点,但是,嗯。


.blue-btn:hover{
 background-color: #003D99;
}

悬停时更改背景颜色是可选的,但是,会给按钮添加一个非常酷的效果,就像向上滑动的新文本是完全不同的按钮一样。


.blue-btn:hover .first-link{
 margin-top: -4em;
}

这段代码是我们把'first-link'类给第一个链接的惟一原因,

你可以看一下下面(和上面)的最终演示。

演示

讨论
学以致用 profile image