如何用CSS动画将五角大楼折成两半？

时间：2016-06-01 15:04:31

标签： css animation svg

这是我的代码： https://jsfiddle.net/7y7d0jd6/

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并尝试“折叠”该课程 这显然不是我想要的，但似乎是更近的一步。它变成粉红色并折叠下来。

然而，我希望它像动画一样慢慢折叠。为什么持续时间不起作用？

1 个答案:

答案 0 :(得分：1)

您需要在右侧元素上添加transition属性并更改变换的原点。加上这个：

#slow-container2 {
     transition:all .3s linear;
     transform-origin:bottom center;
}

完整示例 

body {background:#dadada}
#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;
  background: lightgreen;
}
.slow-parent2 {
  background: white;
}
.slow-parent3 {
  height: 300px;
  background: red;
}

#slow-container2 {
  transition: all .3s linear;
  transform-origin: bottom center;
}
#slow-container:hover #slow-container2 {
  transform: rotateX(180deg);
  border-color: transparent transparent pink;
}
<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>

相关问题
最新问题