如何複製這種效果？ CSS3

我嘗試複製當你將鼠標懸停在一個按鈕，這個網站上出現這種情況的影響：如何複製這種效果？ CSS3

http://infographic.arte.tv/cinema/polar/fr/femme-fatale#/presentation

寬度/高度變化緩慢和文本里面打轉。我已經掌握了基本知識，可以看到，但感覺真的很笨拙，我不禁感到我正在以這種錯誤的方式去做。我遇到的主要問題是：

讓按鈕調整大小時，文本保持在相同位置。
當調整大小時，讓按鈕保持居中位置。

我一直在試圖讓它只使用css3/html，但也許我應該使用JS？

幫助表示讚賞。

<div class="btn-hidden"> 
<p class="hide-p">PACKAGES</p> 
<p class="see-p">PACKAGES</p> 
</div><!--button--> 

.btn-hidden { 
border: 1px solid #A37276; 
overflow: hidden; 
position: absolute; 
z-index: 7; 
background-color: transparent; 
border-color: #A37276; 
color: #A37276; 
border-radius: 0px; 
height: 20%; 
width: 40%; 
transition: height, ease, 0.6s, left, ease, 0.6s, width, ease, 1s,  bottom, ease, 1s; } 
.btn-hidden .see-p { 
padding: 0px; 
margin: 0px; 
margin-left: 10%; 
text-align: auto; 
margin-top: 6%; 
position: absolute; } 
.btn-hidden p { 
margin-left: 10%; } 
.btn-hidden:hover { 
transition: height, ease, 0.3s, left, ease, 1s, width, ease, 0.3s, bottom, ease, 0.3s; 
width: 30%; 
height: 18%; 
left: 10%; 
border: 1px solid #A3474E; 
color: #A3474E; } 
.btn-hidden:hover .hide-p { 

    transition: bottom, 0.7s; 
    transition: opacity, 0.3s; 
    position: absolute; 
    bottom: -0px; } 
.btn-hidden:hover .see-p { 
    transition: top, 1s; 
    top: 150px; } 


.hide-p { 
position: absolute; 
bottom: 150px; }

來源

2016-01-24 Sean King

爲什麼有多個元素？確保懸停前和懸停時（高度/寬度）+填充+邊距相等。 https://jsfiddle.net/1td9bkLt/1/

垂直文本動畫可以通過添加一個動畫懸停CSS來完成，如果你需要幫助，讓我知道在評論中。

更新：

我最終加入，因爲我負的line-height想法按鈕內<span>元素似乎不工作：P

下面是用動畫跨度文本按鈕： https://jsfiddle.net/seahorsepip/1td9bkLt/3/

它採用position: relative;連同top: something;所以像邊距就不會影響<span>周圍的物品。

來源

2016-01-24 14:03:45 seahorsepip

感謝您的幫助！所以我使用多個元素的原因是垂直文字動畫。你有什麼機會可以分享你的想法？謝謝。 –

當然我會用文本動畫的代碼更新我的答案。這個想法是使用動畫而不是過渡。 – seahorsepip

非常感謝，萬分感謝！你的意思是你會更新你的jsfiddle嗎？我沒有看到任何改變。 –

如何複製這種效果？ CSS3

回答

相關問題