css上下拉动窗帘效果

CSS中有很多常用的动画效果，其中上下拉动窗帘效果是一种常见的效果。下面是示例代码：

 .curtain {
    position: relative;
    overflow: hidden;
  }
  .curtain::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    background-color: #fff;
    transition: height 0.2s linear;
  }
  .curtain.open::before {
    height: 100%;
  } 

以上代码中，.curtain是一个包裹容器，设置其position为relative并overflow为hidden，以便拥有定位和溢出隐藏的效果。.curtain::before是一个伪元素，用于实现上下拉动窗帘效果。伪元素的position为absolute，即绝对定位于包裹容器之上，top和left均为0，即覆盖整个容器，设置width为100%，表示宽度占满整个容器，height初始值为0，因此不可见，background-color为白色，用于产生白色幕布的效果，transition属性设置过渡效果，目标属性为height，时长为0.2s，以线性方式进行，即匀速。

当需要打开上下拉动窗帘时，只需要为包裹容器添加.open类，对应的伪元素的height属性为100%，则幕布由上向下的展开，从而产生上下拉动窗帘的效果。