当前位置：首页 > CSS

css制作水调歌头

2026-02-13 04:38:39CSS

CSS制作《水调歌头》效果

使用CSS可以实现文字排版和动画效果来展示《水调歌头》这首词。以下是几种常见的实现方式：

基础文字排版

通过CSS设置字体、颜色和间距来美化文本显示：

css制作水调歌头

.poem {
  font-family: "SimSun", serif;
  font-size: 18px;
  line-height: 1.8;
  color: #333;
  text-align: center;
  margin: 20px auto;
  max-width: 600px;
}

.title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 15px;
}

.author {
  font-style: italic;
  margin-bottom: 30px;
}

文字渐显动画

为诗句添加逐字显示的动画效果：

css制作水调歌头

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.line {
  opacity: 0;
  animation: fadeIn 0.5s forwards;
}

.line:nth-child(1) { animation-delay: 0.5s; }
.line:nth-child(2) { animation-delay: 1s; }
.line:nth-child(3) { animation-delay: 1.5s; }
/* 继续为每行设置不同的延迟 */

背景水波效果

创建水波背景增强意境：

.container {
  position: relative;
  overflow: hidden;
}

.water {
  position: absolute;
  bottom: 0;
  width: 200%;
  height: 100px;
  background: rgba(0, 150, 255, 0.3);
  border-radius: 50%;
  animation: wave 5s linear infinite;
}

@keyframes wave {
  0% { transform: translateX(0) rotate(0deg); }
  100% { transform: translateX(-50%) rotate(360deg); }
}

完整HTML结构示例

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

进阶效果：毛笔书写动画

使用SVG和CSS可以实现毛笔书写效果：

.stroke {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: draw 3s ease-in-out forwards;
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

这些CSS技术可以单独使用或组合使用，根据需求调整参数和样式，创造出符合《水调歌头》意境的网页展示效果。