css古诗制作

使用CSS制作古诗效果

通过CSS可以轻松实现古诗的排版和样式美化，以下是一些常见的方法和技巧：

基础排版样式 古诗通常需要竖排或横排，并配合适当的字体和间距：

.poem {
  font-family: "楷体", "STKaiti", serif;
  font-size: 18px;
  line-height: 2;
  text-align: center;
  margin: 20px auto;
  max-width: 600px;
}

竖排文字效果 通过CSS的writing-mode属性可以实现古诗竖排：

.vertical-poem {
  writing-mode: vertical-rl;
  height: 400px;
  padding: 20px;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
}

添加背景和装饰 为古诗添加传统风格的背景和装饰：

.decorated-poem {
  background-image: url('chinese-pattern.png');
  background-size: 30%;
  padding: 30px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

标题和作者样式 突出显示古诗标题和作者信息：

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

.poem-author {
  font-style: italic;
  margin-top: 10px;
  color: #666;
}

响应式设计 确保古诗在不同设备上都能良好显示：

@media (max-width: 768px) {
  .poem {
    font-size: 16px;
    max-width: 90%;
  }

  .vertical-poem {
    writing-mode: horizontal-tb;
    height: auto;
  }
}

动画效果 为古诗添加淡入效果：

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

.animated-poem {
  animation: fadeIn 1.5s ease-in-out;
}

这些CSS技巧可以帮助创建具有传统美感的古诗页面效果，根据实际需求可以调整样式参数。