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'类给第一个链接的惟一原因,
你可以看一下下面(和上面)的最终演示。