当前位置：首页 > CSS

css制作画卷

2026-03-12 00:20:20CSS

使用CSS制作画卷效果

通过CSS的渐变、阴影和伪元素可以实现古典画卷的展开效果。以下是两种常见实现方式：

基础画卷样式

.scroll-container {
  width: 300px;
  height: 150px;
  background: linear-gradient(to right, #f5e7c1, #e2c48e);
  border-radius: 10px;
  position: relative;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  padding: 20px;
}

添加卷轴装饰

.scroll-container::before,
.scroll-container::after {
  content: "";
  position: absolute;
  width: 30px;
  height: 100%;
  background: linear-gradient(to right, #8B4513, #A0522D);
  top: 0;
}

.scroll-container::before {
  left: -15px;
  border-radius: 10px 0 0 10px;
}

.scroll-container::after {
  right: -15px;
  border-radius: 0 10px 10px 0;
}

动态展开动画

@keyframes unfold {
  0% { transform: scaleX(0); }
  100% { transform: scaleX(1); }
}

.animated-scroll {
  transform-origin: left center;
  animation: unfold 1.5s ease-out forwards;
}

应用示例HTML结构

<div class="scroll-container animated-scroll">
  <p>此处放置画卷内容</p>
</div>

进阶纹理效果 添加宣纸纹理可增强真实感：

.paper-texture {
  background-image: 
    linear-gradient(to right, #f5e7c1, #e2c48e),
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="0.6" numOctaves="5" stitchTiles="stitch"/></filter><rect width="100" height="100" filter="url(%23noise)" opacity="0.1"/></svg>');
  background-blend-mode: multiply;
}

关键点在于：

css制作画卷