[分享]css3拉开帷幕动画

CSS3是前端开发中的一项重要技术，它可以实现各种各样的动画效果，其中一个常见的效果就是拉开帷幕动画。

 .curtain {
        position: relative;
        width: 100%;
        height: 100vh;
        overflow: hidden;
    }
    .curtain .curtain-left, .curtain .curtain-right {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 50%;
        background-color: #000000;
        transition: all 0.5s ease;
    }
    .curtain .curtain-left {
        left: 0;
        transform-origin: left;
        transform: skewX(-15deg);
    }
    .curtain .curtain-right {
        right: 0;
        transform-origin: right;
        transform: skewX(15deg);
    }
    .curtain.open .curtain-left {
        transform: translateX(-50%) skewX(-15deg);
    }
    .curtain.open .curtain-right {
        transform: translateX(50%) skewX(15deg);
    } 

以上是实现拉开帷幕动画的CSS样式代码，其中通过使用transform属性实现帷幕倾斜和位移的效果，使用transition属性实现过渡效果。

同时，在HTML代码中需要为帷幕添加一个class为"curtain"的div元素，以及两个class为"curtain-left"和"curtain-right"的div元素，如下：

 <div class="curtain">
        <div class="curtain-left"></div>
        <div class="curtain-right"></div>
    </div> 

在JavaScript代码中，可以通过改变"curtain"元素的class值实现开启和关闭帷幕的动画效果：

 var curtain = document.querySelector(".curtain");
    curtain.classList.add("open");
    // 动画完成后，将"open" class从"curtain"元素中移除
    setTimeout(function() {
        curtain.classList.remove("open");
    }, 1000); 

使用上述的HTML、CSS和JavaScript代码，可以轻松地实现拉开帷幕动画的效果，给网页增加一份优雅和美观。