我想从上到下而不是从下到上制作我的标签动画。所以顶部将打开,底部停留在那里:
div.label4 {
background-color: #4D6EF6;
width: 278px;
height: 388px;
margin: 10px auto;
text-align: center;
vertical-align: middle;
color: #4D6EF6;
font-size: 30px;
font-weight: bold;
border-radius: 4px;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-decoration: none;
border: transparent;
float: left;
transition: width 1.5s, height 1.5s;
transition-duration: 1.5s
}
div.label4:hover {
height: 194px;
}
<div class="label4"></div>
答案 0 :(得分:1)
你可以通过transform-origin
实现你想要的动画,它更灵活,更好,并为你的元素的每一边设置div.label4 {
background-color: #4D6EF6;
width: 278px;
height: 388px;
margin: 10px auto;
text-align: center;
color: #4D6EF6;
font-size: 30px;
font-weight: bold;
border-radius: 4px;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-decoration: none;
border: transparent;
transition: transform 1.5s;
transform: scaleY(1);
transform-origin: bottom center;
}
div.label4:hover {
transform: scaleY(0.5);
}
,
<div class="label4"></div>
{{1}}
答案 1 :(得分:1)
只需将其包裹在flex-direction: column-reverse
的父级中,即可完成:
.parent {
display: flex;
flex-direction: column-reverse;
height: 388px;
width: 278px;
}
div.label4 {
background-color: #4D6EF6;
width: 278px;
height: 388px;
margin: 10px auto;
text-align: center;
vertical-align: middle;
color: #4D6EF6;
font-size: 30px;
font-weight: bold;
border-radius: 4px;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-decoration: none;
border: transparent;
float: left;
transition: width 1.5s, height 1.5s;
transition-duration: 1.5s
}
div.label4:hover {
height: 194px;
}
.parent {
display: flex;
flex-direction: column-reverse;
height: 388px;
width: 278px;
}
&#13;
<div class="parent">
<div class="label4"></div>
</div>
&#13;
答案 2 :(得分:1)
如果您可以更改HTML,则可以创建容器,然后使用.label4
和position: absolute
bottom
.parent {
height: 388px;
padding-top: 10px;
position: relative;
}
div.label4 {
background-color: #4D6EF6;
width: 278px;
height: 388px;
margin: 10px auto;
text-align: center;
vertical-align: middle;
color: #4D6EF6;
font-size: 30px;
font-weight: bold;
border-radius: 4px;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-decoration: none;
border: transparent;
float: left;
transition: width 1.5s, height 1.5s;
transition-duration: 1.5s;
position: absolute;
bottom: 0;
}
div.label4:hover {
height: 194px;
}
&#13;
<div class="parent">
<div class="label4"></div>
</div>
&#13;