Question

我做了一个滑动文本按钮，在悬停时向上滑动。以下是示例：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>

Answer 1

我之前从未使用过css所以我无法验证你是以正确的方式做到这一点（感觉更像是对我的黑客攻击），但是，使用你的代码作为基础，我修改它以便它滑到左边。

看看:) 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;
}

滑动文本按钮：如何使用CSS3使其向各个方向滑动

1 个答案: