我制作了一个滑动文本按钮，当鼠标悬停时它会向上滑动。这是示例:http://jsfiddle.net/kEQq4/
如何让它既能向上滑动，又能向下、向左或向右滑动？
这是我的代码:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style>
a{
color: white;
font-weight: bold;
text-decoration:none;
text-align: center;
display:block; /* important */
}
.blue-btn, .first-link{
-webkit-transition: 1.8s;
-moz-transition: 1.8s;
-ms-transition: 1.8s;
transition: 1.8s;
}
.blue-btn{
height: 64px;
width: 200px;
line-height: 64px;
overflow: hidden;
background-color: #3b5998;
}
.blue-btn:hover{
background-color: #ff0000;
}
.first-link{
margin-top: 0;
}
.blue-btn:hover .first-link{
margin-top: -64px;
}
</style>
</head>
<body>
<div class="blue-btn">
<a class="first-link" href="#"> First Text </a>
<a href="#"> Second Text </a>
</div>
</body>
</html>
最佳答案
我以前从未使用过 css，所以我无法验证您是否以正确的方式执行此操作(对我来说更像是 hack)，但是，使用您的代码作为基础，我对其进行了修改，以便它向左滑动。
看看 :) http://jsfiddle.net/kEQq4/20/
a{
color: white;
font-weight: bold;
text-decoration:none;
text-align: center;
display:block; /* important */
}
.blue-btn, .first-link{
-webkit-transition: 1s;
-moz-transition: 1s;
-ms-transition: 1s;
transition: 1s;
}
.blue-btn, .second-link{
-webkit-transition: 1s;
-moz-transition: 1s;
-ms-transition: 1s;
transition: 1s;
}
.blue-btn{
height: 64px;
width: 200px;
line-height: 64px;
overflow: hidden;
background-color: #3b5998;
}
.blue-btn:hover{
background-color: #ff0000;
}
.first-link{
margin-top: 0px;
margin-left: 0px;
}
.second-link{
margin-top: -64px;
margin-left: 300px;
}
.blue-btn:hover .first-link{
margin-left: -300px;
}
.blue-btn:hover .second-link{
margin-left: 0px;
}
关于css - 滑动文字按钮 : how to make it sliding in all direction with CSS3，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20994901/