滑動文本按鈕：如何使它與CSS3的所有方向滑動

我已經制作了一個滑動文本按鈕，它在向上滑動時向上滑動。這裏是例子：http://jsfiddle.net/kEQq4/滑動文本按鈕：如何使它與CSS3的所有方向滑動

如何使它不僅向上，而且向下，向左或向右滑動？

這裏是我的代碼：

<!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>

來源

2014-01-08 user3164311

'我已經made' ...嗚嗚嗚嗚......滑稽別人做了同樣的代碼，請參閱[這裏]（http://codepen.io/ RichardBray /筆/ julhw）。 – anderstood

我從來沒有使用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; 
}

來源

2014-08-22 21:56:40 Abraham

滑動文本按鈕：如何使它與CSS3的所有方向滑動

回答

相關問題