当前位置：首页 > CSS

css春节效果制作

2026-03-11 23:25:53CSS

CSS春节效果制作方法

灯笼效果 使用CSS动画和伪元素创建动态灯笼：

.lantern {
  width: 80px;
  height: 100px;
  background-color: #f00;
  border-radius: 50% 50% 10% 10%;
  position: relative;
  animation: swing 3s infinite alternate;
}
.lantern::before {
  content: "春";
  color: gold;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
@keyframes swing {
  0% { transform: rotate(-5deg); }
  100% { transform: rotate(5deg); }
}

烟花动画 通过多元素组合实现烟花绽放效果：

.firework {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  box-shadow: 
    0 0 10px 4px #f00,
    20px 20px 0 2px #ff0,
    -20px 20px 0 2px #0f0;
  animation: explode 1s ease-out infinite;
}
@keyframes explode {
  0% { transform: scale(0); opacity: 1; }
  100% { transform: scale(1.5); opacity: 0; }
}

红包雨效果 结合transform和animation实现下落动画：

.red-packet {
  width: 60px;
  height: 80px;
  background: linear-gradient(135deg, #f00 50%, #ff0 50%);
  position: absolute;
  animation: fall 5s linear infinite;
}
@keyframes fall {
  0% { top: -100px; transform: rotate(0deg); }
  100% { top: 100vh; transform: rotate(360deg); }
}

春联样式 使用text-shadow和渐变背景：

.couplet {
  width: 120px;
  height: 400px;
  background: linear-gradient(to bottom, #d70000, #9b0000);
  color: #ffde59;
  text-shadow: 0 0 10px rgba(255,222,89,0.8);
  padding: 20px;
  font-size: 24px;
  writing-mode: vertical-rl;
  text-orientation: upright;
}

注意事项

css春节效果制作