css制作春联

2026-01-28 00:40:48CSS

使用CSS制作春联

通过CSS的伪元素、边框和文本装饰可以模拟传统春联的样式。以下是一个实现方案：

<div class="spring-couplet left">福如东海</div>
<div class="spring-couplet right">寿比南山</div>
<div class="spring-couplet horizontal">喜迎新春</div>

.spring-couplet {
  position: relative;
  font-family: "楷体", "STKaiti", serif;
  font-weight: bold;
  text-align: center;
  background: #c12c2c;
  color: #ffde59;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

.spring-couplet.left,
.spring-couplet.right {
  width: 100px;
  height: 400px;
  line-height: 400px;
  font-size: 36px;
  margin: 20px;
  display: inline-block;
}

.spring-couplet.horizontal {
  width: 200px;
  height: 80px;
  line-height: 80px;
  font-size: 28px;
  margin: 0 auto;
}

.spring-couplet::before,
.spring-couplet::after {
  content: "";
  position: absolute;
  background: #ffde59;
}

.spring-couplet.left::before,
.spring-couplet.right::before {
  width: 20px;
  height: 100%;
  top: 0;
}

.spring-couplet.left::before {
  left: -10px;
}

.spring-couplet.right::before {
  right: -10px;
}

.spring-couplet.horizontal::before,
.spring-couplet.horizontal::after {
  width: 100%;
  height: 10px;
  left: 0;
}

.spring-couplet.horizontal::before {
  top: -5px;
}

.spring-couplet.horizontal::after {
  bottom: -5px;
}

添加装饰元素

为增强视觉效果，可以添加金色边框和传统纹样：

.spring-couplet {
  border: 4px double #ffde59;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.spring-couplet::after {
  background: linear-gradient(45deg, transparent 45%, #ffde59 45%, #ffde59 55%, transparent 55%);
  width: 100%;
  height: 10px;
  bottom: -15px;
}

响应式布局调整

确保在不同设备上都能正常显示：

@media (max-width: 600px) {
  .spring-couplet.left,
  .spring-couplet.right {
    width: 60px;
    height: 300px;
    line-height: 300px;
    font-size: 24px;
  }

  .spring-couplet.horizontal {
    width: 150px;
    height: 60px;
    line-height: 60px;
  }
}

动画效果

添加轻微动画使春联更生动：

.spring-couplet {
  transition: transform 0.3s ease;
}

.spring-couplet:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

这种方法利用CSS的边框、伪元素和阴影效果创建了传统春联的视觉样式，通过响应式设计确保在各种设备上都能正常显示，并添加了交互效果增强用户体验。

css制作春联