[英]How to replicate this effect? CSS3
I'm trying to replicate the effect that happens when you hover over a button on this website: 我正在尝试复制将鼠标悬停在此网站上的按钮上时发生的效果:
http://infographic.arte.tv/cinema/polar/fr/femme-fatale#/presentation http://infographic.arte.tv/cinema/polar/fr/femme-fatale#/presentation
The width/height changes slowly and the text inside spins around. 宽度/高度变化缓慢,内部文本旋转。 I've got the basics working as you can see but it feels really clunky and I can't help but feel I'm going about this the wrong way. 正如您所看到的,我已经掌握了一些基础知识,但感觉确实很笨拙,我忍不住觉得自己走错了路。 The main problems I'm having are: 我遇到的主要问题是:
I've been trying to get it working using only css3/html but perhaps I should be using JS? 我一直在尝试仅使用css3 / html使其工作,但也许我应该使用JS?
https://jsfiddle.net/1td9bkLt/ https://jsfiddle.net/1td9bkLt/
Help appreciated. 帮助表示赞赏。
<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; }
Why multiple elements? 为什么要包含多个元素? Make sure that (height/width)+padding+margin is equal before and on hover. 悬停前后,请确保(高度/宽度)+填充+边距相等。 https://jsfiddle.net/1td9bkLt/1/ https://jsfiddle.net/1td9bkLt/1/
The vertical text animation can be done by adding a animation to the on hover css, if you need help with that let me know in the comments. 如果您需要帮助,请在注释中告诉我,可以通过将动画添加到悬停CSS上来完成垂直文本动画。
Update: 更新:
I ended up adding a <span>
element inside the button since my negative line-height idea didn't seem to work :P 我最终在按钮内添加了<span>
元素,因为我的负线高想法似乎不起作用:P
Here's the button with animated span text: https://jsfiddle.net/seahorsepip/1td9bkLt/3/ 这是带有动画范围文本的按钮: https : //jsfiddle.net/seahorsepip/1td9bkLt/3/
It uses position: relative;
它使用position: relative;
together with top: something;
与top: something;
一起top: something;
So it does not affect the items around the <span>
like margin does. 因此,它不会像边距那样影响<span>
周围的项目。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.