如何复制这种效果? CSS3

时间:2016-01-24 13:37:12

标签: javascript html css3

我试图复制当您将鼠标悬停在此网站上的按钮上时发生的效果:

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; }

1 个答案:

答案 0 :(得分:4)

为什么要多元素? 确保悬停前和悬停时(高度/宽度)+填充+边距相等。 https://jsfiddle.net/1td9bkLt/1/

垂直文本动画可以通过向悬停css添加动画来完成,如果您需要帮助,请在评论中告诉我。

更新

我最后在按钮内添加了<span>元素,因为我的负线高度想法似乎不起作用:P

这里是带有动画范围文字的按钮: https://jsfiddle.net/seahorsepip/1td9bkLt/3/

它与position: relative;一起使用top: something;因此它不会影响<span>边缘附近的项目。