当前位置：首页 > CSS

css制作画卷

2026-01-28 17:11:59CSS

CSS 画卷效果实现

画卷效果通常指类似中国水墨画展开或卷起的动画效果，可以通过CSS的transform、transition和clip-path等属性实现。以下是两种常见的实现方式：

横向展开画卷

通过clip-path裁剪元素，结合动画模拟画卷展开：

.painting {
  width: 600px;
  height: 300px;
  background: url('painting.jpg') no-repeat;
  background-size: cover;
  position: relative;
  overflow: hidden;
}

.painting::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #f5e8c0; /* 画卷底色 */
  clip-path: inset(0 100% 0 0);
  animation: unfold 3s forwards;
}

@keyframes unfold {
  to {
    clip-path: inset(0 0 0 0);
  }
}

纵向卷轴效果

模拟传统卷轴上下展开：

.scroll {
  width: 400px;
  height: 0;
  background: url('scroll-painting.jpg') no-repeat;
  background-size: contain;
  margin: 0 auto;
  position: relative;
  animation: scroll-down 2.5s ease-in-out forwards;
}

@keyframes scroll-down {
  to {
    height: 600px;
  }
}

/* 添加卷轴装饰 */
.scroll::before, .scroll::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 40px;
  background: #d4a76a;
  left: 0;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

.scroll::before { top: -40px; }
.scroll::after { bottom: -40px; }

进阶3D卷起效果

使用CSS 3D变换模拟画卷卷起：

.roll-up {
  width: 500px;
  height: 300px;
  transform-style: preserve-3d;
  animation: roll 4s linear forwards;
}

@keyframes roll {
  0% { transform: rotateX(0deg); }
  100% { transform: rotateX(360deg); }
}