当前位置：首页 > CSS

css制作春联

2026-01-08 21:24:06CSS

使用CSS制作春联的方法

基础布局与样式

春联通常由一对垂直排列的红色对联和顶部的横批组成。使用CSS的flexbox布局可以轻松实现这种结构。创建一个父容器，内部包含三个子元素：横批、上联和下联。

<div class="couplet-container">
  <div class="horizontal-title">福星高照</div>
  <div class="vertical-couplet left">上联内容</div>
  <div class="vertical-couplet right">下联内容</div>
</div>

.couplet-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #f8f8f8;
  padding: 20px;
}

.horizontal-title {
  width: 200px;
  height: 60px;
  background-color: #e60000;
  color: gold;
  font-size: 24px;
  text-align: center;
  line-height: 60px;
  margin-bottom: 20px;
}

.vertical-couplet {
  width: 60px;
  height: 300px;
  background-color: #e60000;
  color: gold;
  font-size: 20px;
  padding: 10px;
  writing-mode: vertical-rl;
  text-align: center;
  line-height: 60px;
}

.left {
  margin-right: 10px;
}

.right {
  margin-left: 10px;
}

装饰效果增强

为春联添加传统装饰元素，如金色边框和阴影效果，使其更具节日氛围。

.horizontal-title, .vertical-couplet {
  border: 2px solid gold;
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);
  font-family: "楷体", "STKaiti", serif;
  font-weight: bold;
}

.horizontal-title {
  border-radius: 5px;
}

.vertical-couplet {
  border-top: 4px solid gold;
  border-bottom: 4px solid gold;
}

响应式设计

确保春联在不同设备上都能正常显示，通过媒体查询调整尺寸和布局。

@media (max-width: 600px) {
  .horizontal-title {
    width: 150px;
    height: 50px;
    font-size: 18px;
  }

  .vertical-couplet {
    width: 50px;
    height: 250px;
    font-size: 16px;
  }
}

动画效果

添加简单的动画效果，如悬停时放大，增强交互体验。

.vertical-couplet:hover {
  transform: scale(1.05);
  transition: transform 0.3s ease;
}

完整示例代码

结合以上所有元素，创建一个完整的春联CSS实现。

<!DOCTYPE html>
<html>
<head>
  <style>
    .couplet-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      background-color: #f8f8f8;
      padding: 20px;
    }

    .horizontal-title {
      width: 200px;
      height: 60px;
      background-color: #e60000;
      color: gold;
      font-size: 24px;
      text-align: center;
      line-height: 60px;
      margin-bottom: 20px;
      border: 2px solid gold;
      box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);
      font-family: "楷体", "STKaiti", serif;
      font-weight: bold;
      border-radius: 5px;
    }

    .vertical-couplet {
      width: 60px;
      height: 300px;
      background-color: #e60000;
      color: gold;
      font-size: 20px;
      padding: 10px;
      writing-mode: vertical-rl;
      text-align: center;
      line-height: 60px;
      border: 2px solid gold;
      border-top: 4px solid gold;
      border-bottom: 4px solid gold;
      box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);
      font-family: "楷体", "STKaiti", serif;
      font-weight: bold;
    }

    .left {
      margin-right: 10px;
    }

    .right {
      margin-left: 10px;
    }

    .vertical-couplet:hover {
      transform: scale(1.05);
      transition: transform 0.3s ease;
    }

    @media (max-width: 600px) {
      .horizontal-title {
        width: 150px;
        height: 50px;
        font-size: 18px;
      }

      .vertical-couplet {
        width: 50px;
        height: 250px;
        font-size: 16px;
      }
    }
  </style>
</head>
<body>
  <div class="couplet-container">
    <div class="horizontal-title">喜迎新春</div>
    <div class="vertical-couplet left">春满人间百花吐艳</div>
    <div class="vertical-couplet right">福临小院四季常安</div>
  </div>
</body>
</html>

通过以上方法，可以创建一个具有传统风格的春联效果，同时保持现代网页设计的响应性和交互性。

css制作春联