css制作画卷

使用CSS制作画卷效果

通过CSS的渐变、阴影和伪元素可以模拟传统画卷的视觉效果。以下是实现方法：

HTML结构

<div class="scroll-container">
  <div class="scroll-paper"></div>
</div>

基础画卷样式

.scroll-container {
  position: relative;
  width: 300px;
  height: 500px;
  margin: 0 auto;
  background: #e8d8b0;
  border-radius: 5px;
  box-shadow: 0 0 15px rgba(0,0,0,0.3);
}

.scroll-paper {
  width: 90%;
  height: 90%;
  margin: 5% auto;
  background: linear-gradient(
    to bottom,
    #fff9e6 0%,
    #fff9e6 90%,
    #f5e8c2 100%
  );
  box-shadow: inset 0 0 10px rgba(0,0,0,0.1);
}

添加卷轴装饰

使用伪元素创建卷轴两端的效果：

.scroll-container::before,
.scroll-container::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 20px;
  background: #8b4513;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.scroll-container::before {
  top: -10px;
}

.scroll-container::after {
  bottom: -10px;
}

添加纸张纹理

通过重复线性渐变模拟宣纸纹理：

.scroll-paper {
  background: 
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 1px,
      rgba(0,0,0,0.05) 1px,
      rgba(0,0,0,0.05) 2px
    ),
    linear-gradient(
      to bottom,
      #fff9e6 0%,
      #fff9e6 90%,
      #f5e8c2 100%
    );
}

实现展开动画

添加CSS动画使画卷具有展开效果：

@keyframes scrollUnroll {
  0% {
    height: 0;
    opacity: 0;
  }
  100% {
    height: 90%;
    opacity: 1;
  }
}

.scroll-paper {
  animation: scrollUnroll 1.5s ease-out forwards;
}

响应式调整

针对不同屏幕尺寸调整画卷比例：

@media (max-width: 768px) {
  .scroll-container {
    width: 200px;
    height: 350px;
  }
}

通过组合这些CSS技术，可以创建出具有传统美感的画卷效果，包括纸张纹理、木质卷轴和展开动画等视觉元素。调整颜色、尺寸和动画参数可获得不同风格的画卷呈现效果。