css制作春联

2026-02-12 19:08:33CSS

使用CSS制作春联效果

通过CSS的transform属性和文本样式可以模拟传统春联的竖排文字效果。以下是一个完整的实现方法：

<div class="spring-couplet">
  <div class="couplet left">春风送暖千山绿</div>
  <div class="couplet right">旭日生辉万木荣</div>
  <div class="horizontal">喜迎新春</div>
</div>

.spring-couplet {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f8f8f8;
  padding: 20px;
  font-family: "KaiTi", "STKaiti", serif;
}

.couplet {
  writing-mode: vertical-rl;
  text-orientation: upright;
  padding: 30px 15px;
  margin: 0 20px;
  font-size: 36px;
  color: #d10000;
  background: linear-gradient(to bottom, #ffde59, #d10000);
  border-radius: 5px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.horizontal {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 42px;
  color: gold;
  background-color: #d10000;
  padding: 10px 40px;
  border-radius: 5px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

进阶动画效果

为春联添加节日动画效果，可以使用CSS关键帧动画：

.couplet {
  animation: swing 3s ease-in-out infinite alternate;
}

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

.horizontal {
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0% {
    transform: translateY(-50%) scale(1);
  }
  50% {
    transform: translateY(-50%) scale(1.05);
  }
  100% {
    transform: translateY(-50%) scale(1);
  }
}

响应式布局调整

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

css制作春联

@media (max-width: 768px) {
  .spring-couplet {
    flex-direction: column;
    padding: 10px;
  }

  .couplet {
    writing-mode: horizontal-tb;
    margin: 10px 0;
    padding: 15px 30px;
  }

  .horizontal {
    position: relative;
    top: auto;
    transform: none;
    margin: 20px 0;
  }
}

这些CSS技术组合可以创建出具有传统风格的春联效果，包含竖排文字、金色边框和红色背景等典型元素。通过调整颜色、字体和动画参数，可以进一步自定义春联的外观。