这里是我的代码:https://jsfiddle.net/7y7d0jd6/
HTML:
我正在尝试通过CSS动画将五边形对折。目前,它只是一个“下降”的条带,但我知道我可以让它看起来像五边形的顶部。
然而,有没有更平滑的方法来实现这一点?我被难住了。
我还尝试过: https://jsfiddle.net/7y7d0jd6/4/ 第二个HTML尝试:
添加一个新的类
然而,我希望它像动画一样缓慢地折叠下来。为什么持续时间不起作用呢?
<div id="slow-container">
<div class="slow-parent1">
<div class="slow-parent2">
<div class="slow-parent3">
stuff goes here later
</div>
</div>
</div>
</div>
</div>
首次尝试CSS:
#slow-container {
position: relative;
top:100px;
width: 100px;
border-width: 96px 64px 0;
border-style: solid;
border-color: red transparent; }
#slow-container:before {
content: "";
position: absolute;
height: 0;
width: 0;
top: -176px;
left: -64px;
border-width: 0 114px 81px;
border-style: solid;
border-color: transparent transparent red;
}
.slow-parent1 {
height: 0;
overflow: hidden;
-webkit-transition-property: height;
-webkit-transition-duration: 2s;
-webkit-perspective: 1000px;
-webkit-transform-style: preserve-3d;
-moz-transition-property:height;
-moz-transition-duration: 2s;
-moz-perspective: 1000px;
-moz-transform-style: preserve-3d;
-o-transition-property: all;
-o-transition-duration: 2s;
-o-transform: rotateX(-90deg);
-o-transform-origin: top;
transition-property: height;
transition-duration: 2s;
perspective: 1000px;
transform-style: preserve-3d;
background: lightgreen;
}
.slow-parent2 {
background: white;
}
.slow-parent3 {
height: 300px;
background: red;
-webkit-transition-property: all;
-webkit-transition-duration: 2s;
-webkit-transform: rotateX(-90deg);
-webkit-transform-origin: top;
-moz-transition-property: all;
-moz-transition-duration: 2s;
-moz-transform: rotateX(-90deg);
-moz-transform-origin: top;
-o-transition-property: all;
-o-transition-duration: 2s;
-o-transform: rotateX(-90deg);
-o-transform-origin: top;
transition-property: all;
transition-duration: 2s;
transform: rotateX(-90deg);
transform-origin: top;
}
#slow-container:hover .slow-parent1 {
height: 301px;
}
#slow-container:hover .slow-parent3 {
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
transform: rotateX(0deg);
height: 300px;
}
我正在尝试通过CSS动画将五边形对折。目前,它只是一个“下降”的条带,但我知道我可以让它看起来像五边形的顶部。
然而,有没有更平滑的方法来实现这一点?我被难住了。
我还尝试过: https://jsfiddle.net/7y7d0jd6/4/ 第二个HTML尝试:
<div id="slow-container">
<div id="slow-container2">
</div>
<div class="slow-parent1">
<div class="slow-parent2">
<div class="slow-parent3">
stuff goes here later
</div>
</div>
</div>
</div>
</div>
第二次CSS尝试:
#slow-container {
position: relative;
top:100px;
width: 100px;
border-width: 96px 64px 0;
border-style: solid;
border-color: red transparent; }
#slow-container:before {
content: "";
position: absolute;
height: 0;
width: 0;
top: -176px;
left: -64px;
border-width: 0 114px 81px;
border-style: solid;
border-color: transparent transparent white;
}
#slow-container2 {
content: "";
position: absolute;
height: 0;
width: 0;
top: -176px;
left: -64px;
border-width: 0 114px 81px;
border-style: solid;
border-color: transparent transparent red;
}
.slow-parent1 {
height: 0;
overflow: hidden;
-webkit-transition-property: height;
-webkit-transition-duration: 2s;
-webkit-perspective: 1000px;
-webkit-transform-style: preserve-3d;
-moz-transition-property:height;
-moz-transition-duration: 2s;
-moz-perspective: 1000px;
-moz-transform-style: preserve-3d;
-o-transition-property: all;
-o-transition-duration: 2s;
-o-transform: rotateX(-90deg);
-o-transform-origin: top;
transition-property: height;
transition-duration: 2s;
perspective: 1000px;
transform-style: preserve-3d;
background: lightgreen;
}
.slow-parent2 {
background: white;
}
.slow-parent3 {
height: 300px;
background: red;
-webkit-transition-property: all;
-webkit-transition-duration: 2s;
-webkit-transform: rotateX(-90deg);
-webkit-transform-origin: top;
-moz-transition-property: all;
-moz-transition-duration: 2s;
-moz-transform: rotateX(-90deg);
-moz-transform-origin: top;
-o-transition-property: all;
-o-transition-duration: 2s;
-o-transform: rotateX(-90deg);
-o-transform-origin: top;
transition-property: all;
transition-duration: 2s;
transform: rotateX(-90deg);
transform-origin: top;
}
#slow-container:hover #slow-container2 {
height: 301px;
}
#slow-container:hover #slow-container2 {
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
transform: rotateX(180deg);
height: 300px;
top:-95px; border-color: transparent transparent pink;
}
添加一个新的类
#slow-container2
并尝试 "折叠" 它,但显然这并不能达到我的目的,只是更接近了一步。它会变成粉色并向下折叠。然而,我希望它像动画一样缓慢地折叠下来。为什么持续时间不起作用呢?