css古诗制作
使用CSS制作古诗效果
通过CSS可以实现古诗的排版和样式美化，以下是一些常见的方法和代码示例。
竖排文字效果
古诗常采用竖排文字，可以通过CSS的writing-mode属性实现：
.poem-vertical {
writing-mode: vertical-rl;
font-family: "楷体", "STKaiti", serif;
line-height: 2;
text-align: center;
padding: 20px;
background-color: #f5f5f5;
border: 1px solid #ddd;
}<div class="poem-vertical">
床前明月光<br>
疑是地上霜<br>
举头望明月<br>
低头思故乡
</div>传统信笺背景
为古诗添加传统信笺背景：
.poem-paper {
background: url('paper-texture.jpg') repeat;
padding: 30px;
font-family: "宋体", "SimSun", serif;
color: #333;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
max-width: 500px;
margin: 0 auto;
}毛笔字效果
模拟毛笔字风格：
.poem-calligraphy {
font-family: "华文行楷", "STXingkai", cursive;
font-size: 24px;
text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
color: #5c3317;
}标题装饰
为古诗标题添加传统装饰：
.poem-title {
text-align: center;
font-size: 28px;
position: relative;
margin-bottom: 30px;
}
.poem-title:before, .poem-title:after {
content: "——";
margin: 0 15px;
color: #999;
}完整示例
<div class="poem-paper">
<h3 class="poem-title">静夜思</h3>
<div class="poem-vertical poem-calligraphy">
床前明月光<br>
疑是地上霜<br>
举头望明月<br>
低头思故乡
</div>
<p class="poem-author">——李白</p>
</div>动画效果
添加淡入动画：
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.poem-animate {
animation: fadeIn 2s ease-in-out;
}这些CSS技巧可以单独使用或组合应用，根据需求调整样式参数，创建出符合古诗意境的网页展示效果。
