css春节效果制作
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;
}注意事项
- 动画性能优化：使用transform和opacity属性
- 颜色搭配：推荐使用#d70000(中国红)和#ffde59(金色)
- 响应式设计：通过@media查询适配不同设备
- 字体选择：可使用@font-face引入书法字体
这些效果可以单独使用，也可以组合应用在网页的header、banner或特定区域，通过添加更多细节元素如云纹、福字等背景图案增强节日氛围。
