使用CSS3自定义形状和动画

Question

是否可以使用CSS3形状创建以下窗帘效果？

​

​

see animation example

Answer 1

我试着在左边放一个圆，在右边放一个圆。每一个都是动画效果，几乎达到了预期的效果(再次为我的英语道歉)。

<div id="animation-curtains">
    <div class="animation-curtain gauche wrap"></div>
    <div class="animation-curtain droite wrap"></div>
</div>

.animation-curtain {
    top: -60%;
    position: absolute;
    border-radius: 1200px;
    width: 2400px;
    height: 2400px;
    background: #000;
    transform: scale(1) rotate(0deg);
     -webkit-transition-timing-function: ease-in;
    -moz-transition-timing-function: ease-in;
    -o-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
    -webkit-transition-duration: 3s;
    -moz-transition-duration: 3s;
    -o-transition-duration: 3s;
    transition-duration: 3s;
}

.animation-curtain.gauche { left: -20%; }
.animation-curtain.droite { right: -20%; }

#animation-curtains.animate .animation-curtain.gauche {
    top: -200%;
    left: -85%;
    -moz-transform-origin: top left;
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -moz-transform: scale(0.7);
    -webkit-transform: scale(0.7);
    transform: scale(0.7);
}

#animation-curtains.animate .animation-curtain.droite {
    top: -200%;
    right: -85%;
    -moz-transform-origin: top right;
    -webkit-transform-origin: top right;
    transform-origin: top right;
    -moz-transform: scale(0.7);
    -webkit-transform: scale(0.7);
    transform: scale(0.7);
}