css制作水调歌头

2026-01-28 10:14:53CSS

使用CSS制作《水调歌头》效果

可以通过CSS动画和排版技巧实现古典诗词的视觉呈现，以下是具体实现方法：

css制作水调歌头

基础HTML结构

<div class="poem-container">
  <h3 class="poem-title">水调歌头</h3>
  <p class="poem-author">苏轼</p>
  <div class="poem-content">
    <p>明月几时有，把酒问青天。</p>
    <p>不知天上宫阙，今夕是何年。</p>
    <!-- 其余诗句... -->
  </div>
</div>

古典样式CSS

.poem-container {
  width: 80%;
  max-width: 600px;
  margin: 0 auto;
  padding: 2rem;
  background-color: #f8f3e8;
  border: 1px solid #d9c7a7;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  font-family: "楷体", "STKaiti", serif;
}

.poem-title {
  text-align: center;
  font-size: 2rem;
  color: #8b4513;
  margin-bottom: 0.5rem;
  text-shadow: 1px 1px 2px #ccc;
}

.poem-author {
  text-align: right;
  font-size: 1.2rem;
  color: #666;
  margin-bottom: 2rem;
}

.poem-content p {
  line-height: 2.5;
  text-align: center;
  font-size: 1.3rem;
  color: #333;
  margin: 0.5rem 0;
}

添加卷轴动画效果

.poem-container {
  background-image: url('scroll-texture.jpg');
  background-size: cover;
  transform: scaleY(0);
  transform-origin: top;
  animation: unfold 1.5s ease-out forwards;
}

@keyframes unfold {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

.poem-content p {
  opacity: 0;
  animation: fadeIn 0.5s ease-in forwards;
  animation-delay: calc(var(--order) * 0.3s);
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

为诗句添加动态效果

<div class="poem-content">
  <p style="--order: 1">明月几时有，把酒问青天。</p>
  <p style="--order: 2">不知天上宫阙，今夕是何年。</p>
  <!-- 每行诗句添加顺序变量 -->
</div>

毛笔书写效果（可选）

.poem-content p {
  position: relative;
}

.poem-content p::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 100%;
  background: linear-gradient(to right, transparent, #f8f3e8);
  animation: writing 3s linear forwards;
  animation-delay: calc(var(--order) * 0.5s);
}

@keyframes writing {
  from { width: 0; }
  to { width: 100%; }
}

响应式调整

@media (max-width: 768px) {
  .poem-container {
    width: 95%;
    padding: 1rem;
  }

  .poem-title {
    font-size: 1.5rem;
  }

  .poem-content p {
    font-size: 1.1rem;
    line-height: 2;
  }
}

以上代码组合可以创建一个具有古典韵味的《水调歌头》展示效果，包含卷轴展开、诗句逐行显现等动画。可根据实际需求调整动画时长、字体大小和颜色等参数。