css制作春联

2026-02-27 03:47:44CSS

使用CSS制作春联的方法

HTML结构

<div class="spring-couplet">
  <div class="couplet-left">上联内容</div>
  <div class="couplet-right">下联内容</div>
  <div class="couplet-top">横批内容</div>
</div>

CSS样式

.spring-couplet {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: "楷体", "STKaiti", serif;
}

.couplet-left, 
.couplet-right {
  width: 120px;
  height: 500px;
  padding: 20px;
  font-size: 30px;
  text-align: center;
  writing-mode: vertical-rl;
  background-color: #c00;
  color: #ff0;
  margin: 10px;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

.couplet-left {
  align-self: flex-start;
}

.couplet-right {
  align-self: flex-end;
}

.couplet-top {
  width: 200px;
  padding: 10px;
  font-size: 24px;
  text-align: center;
  background-color: #c00;
  color: #ff0;
  margin-bottom: 20px;
}

添加装饰效果的方法

添加金色边框

css制作春联

.couplet-left, 
.couplet-right,
.couplet-top {
  border: 3px solid #daa520;
  border-radius: 5px;
}

添加阴影效果

.spring-couplet {
  text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

响应式设计

css制作春联

@media (max-width: 600px) {
  .couplet-left, 
  .couplet-right {
    width: 80px;
    height: 300px;
    font-size: 20px;
  }

  .couplet-top {
    width: 150px;
    font-size: 18px;
  }
}

动画效果实现

添加悬挂动画

.spring-couplet {
  animation: swing 3s infinite alternate ease-in-out;
  transform-origin: top center;
}

@keyframes swing {
  0% { transform: rotate(-2deg); }
  100% { transform: rotate(2deg); }
}

文字渐变效果

.couplet-left, 
.couplet-right,
.couplet-top {
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  background-image: linear-gradient(to bottom, #ff0, #daa520);
}

这些方法可以组合使用，根据实际需求调整尺寸、颜色和动画效果，创建出具有节日气氛的春联样式。