我正在尝试复制当您将鼠标悬停在该网站上的按钮上时发生的效果:
http://infographic.arte.tv/cinema/polar/fr/femme-fatale#/presentation
宽度/高度变化缓慢,里面的文字旋转。如您所见,我已经掌握了基本的工作原理,但感觉真的很笨拙,我忍不住觉得我在做这件事是错误的。我遇到的主要问题是:
- 让文本在按钮调整大小时保持在相同位置。
- 让按钮在调整大小时保持居中在同一位置。
我一直在尝试只使用 css3/html 让它工作,但也许我应该使用 JS?
https://jsfiddle.net/1td9bkLt/
感谢帮助。
<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; }
最佳答案
为什么要有多个元素? 确保 (height/width)+padding+margin 在悬停之前和悬停时相等。 https://jsfiddle.net/1td9bkLt/1/
垂直文本动画可以通过将动画添加到悬停 css 来完成,如果您需要帮助,请在评论中告诉我。
更新:
我最后添加了一个 <span>
按钮内的元素,因为我的否定行高想法似乎不起作用 :P
这是带有动画跨度文本的按钮: https://jsfiddle.net/seahorsepip/1td9bkLt/3/
它使用 position: relative;
连同 top: something;
所以它不会影响<span>
周围的元素就像 margin 一样。
关于javascript - 如何复制这种效果? CSS3,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34976449/