给网站顶部增添新春气氛：用HTML+CSS打造春节灯笼装饰

新春佳节临近， 许多网站都希望通过一些节日元素来提升页面氛围，吸引用户注意。在网页顶部添加一对摇曳生姿的新春灯笼既简单又能让访客感受到浓厚的节日气息。本文将带你一步步实现这一效果， 提供两款经典且美观的纯HTML+CSS灯笼装饰代码，易复制、易维护，并适配主流浏览器。

整体思路概览

我们会通过以下步骤完成灯笼装饰：

• 1. HTML结构：在网页顶部插入用于展示灯笼的容器及元素。
• 2. CSS样式：利用CSS绘制灯笼形状，并添加动画实现摇摆效果。
• 3. 响应式设计：保证移动端自动隐藏或调整显示方式。
• 4. 多个实例：提供两种不同风格灯笼代码，让你根据需求自由选择。

第一款：简洁经典的新春红色灯笼

1. HTML结构示例

说明：.lantern-container作为父容器固定位置在顶部；两个.lantern分别代表左右两盏灯笼， 每个由主体、绳子和流苏组成。

2. CSS样式与动画代码详解

/* 容器定位 */
.lantern-container {
  position: fixed;
  top: 10px;
  left: 0;
  width: 100%;
  pointer-events: none; /* 不影响点击 */
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
}
/* 灯笼主体 */
.lantern {
  position: relative;
  width: 60px;
}
.lantern .body {
  width: 40px;
  height: 60px;
  background:
    radial-gradient;
  border-radius:50% /70%;
  box-shadow:
    inset -5px -5px rgba,
    inset 5px -5px rgba;
}
/* 绳子 */
.lantern .string {
   position: absolute;
   top:-20px; left:50%;
   width:2px; height:20px;
   background:#660000;
   transform: translateX;
}
/* 流苏 */
.lantern .fringe {
   position:absolute;
   bottom:-15px; left:50%;
   width:12px; height:15px;
   background:#b30000;
   clip-path:
     polygon;
   transform-origin:center top;
   transform-style: preserve-3d;
   animation-name:sway-fringe;
   animation-duration:2s;
   animation-iteration-count: infinite;
}
/* 左右摇摆动画 */
@keyframes sway-left {
 from {transform-origin:center bottom rotate;}
 to {transform-origin:center bottom rotate;}
}
@keyframes sway-right {
 from {transform-origin:center bottom rotate;}
 to {transform-origin:center bottom rotate;}
}
@keyframes sway-fringe{
 from{transform : rotate;}
 to{transform : rotate;}
}
/* 分别赋予左右摇摆动画 */
.lantern.left{
 animation:sway-left ease-in-out infinite alternate ;
 animation-duration :3s ;
}
.lantern.right{
 animation:sway-right ease-in-out infinite alternate ;
 animation-duration :3s ;
}
.lantern.left .fringe,
.lantern.right .fringe{
 animation-timing-function:ease-in-out ;
}

解析：

• .lantern-container固定页面顶部，两边各放一个灯笼。
• .body使用径向渐变模拟红色渐层与光影效果，配合椭圆形边框模拟传统纸质灯笼。
• .string模拟悬挂绳子位置。
• .fringe为下方小流苏， 通过clip-path绘制三角型，再加上周期性的左右旋转动画，增强动感。
• @keyframes定义左右晃动动作，实现真实悬挂物轻微摆动效果。
• .left和.right类分别赋予相反方向的晃动，使视觉更生动自然。

3. 响应式处理

@media  {
 .lantern-container{
     display:none!important; /* 移动设备自动隐藏以避免遮挡屏幕内容 */
 }
}

这个设置确保手机和平板浏览时不会出现遮挡，提高用户体验。

第二款：中式风格带纹理的新年喜庆红灯笼

新年快乐&恭贺发财&万事如意 &阖家幸福 

2. CSS样式详解

/***** 容器基本布局 *****/
.spring-festival-lanterns{
 display:flex ;
 justify-content : space-between ;
 align-items:center ;
 padding :10px ;
 background-color:#fff5f5 ; /* 淡粉底色 */
 border-bottom :solid #ff3300 thin;
/*** 固定于顶部 ***/
 position : fixed ; 
 top :0 ; 
 left :0 ; 
 right :0 ; 
 z-index :9999 ;
 pointer-events:none ; /* 不阻碍交互 */
}
/**** 左右宫灯造型 ****/
.lantern {
 width :70 px ;
 height :120 px ;
 background:
 linear-gradient(to bottom,
 #cc000011,
 #cc000099 );
 box-shadow :
 inset -4 px -6 px rgba,
 inset -1 px -12 px rgba;
 border-radius:
60 % /65 % ;
 box-sizing:border-box ;
 position ：relative ;
 margin ：auto；
 cursor:pointer；
 pointer-events:auto;
/*** 渐变叠加红色 ***/
background-image:
radial-gradient(circle at center,
#ff333311,
#b300002a),
linear-gradient(to bottom,
#e600001f,
#c700001f);
/***** 红色边框 *****/
border:
4 px solid #b30000;
/**** 阴影 *****/
box-shadow:
inset -6 px -8 px rgba,
inset -4 px -14 px rgba,
rgba ;
animation-name:
bounce-lanter ;
animation-duration:
2500 ms ;
animation-iteration-count:
infinite ;
/***** 灯芯和花纹 *****/
}
.lantern::before {
 content:"";
 position:absolute ;
 top:-14 px ;
 left :45 % ;
/*** 灯芯 ***/
width :
10 Px ;
height :
14 Px ;
background-color :
#fff9cc ;
/*** 圆柱形 ***/
border-radius :
30 % /40 % ;
/*** 光影效果 ***/
box-shadow :
inset -1 Px -1 Px rgba ,
inset +1 Px +1 Px rgba ;
/*** 绕轴旋转点***/
transform-origin :
center center ;
}
/** 流苏 **/
.lantern::after {
 content:"";
position:absolute ;
bottom:-18 px;
left :
48 %;
/**** 三角形 ****/
width :
12 PX;height :
18 PX;background-color:
#b30000;
/**** 剪裁成扇状 ****/
clip-path:
polygon(
10 %,10 %,
90 %,10 %,
85 %,100 %,
70 %,85 %,
55 %,90 %
);
/**** 动画扇动 ****/
animation-name :
tassel-wave ;
animation-duration :
3200 ms ;
animation-timing-function
ease-in-out
animation-iteration-count
infinite
}
/**** 新年祝福文字区域 ****/
.festival-text {
 font-size :22 PX;
 font-weight:bold ;
 color:#cc3300 ;
 font-family :"华文行楷", cursive ,"Microsoft Yahei", sans-serif;
 margin:auto;
 pointer-events:auto ;
 text-align:center ;
 user-select:none
}
/******* 动画关键帧 **********/
@keyframes bounce-lanter {
from {
 transform:
translateY ;
 }
to{
 transform:
translateY ;
 }
}
@keyframes tassel-wave{
from{
 transform
rotate
}
to{
 transform
rotate 
}
}
/******** 响应式处理 **********/
@media screen and {
.spring-festival-lanterns{
display ：none !important;
}
}

完整应用步骤说明

步骤一：把HTML代码粘贴到网站头部部分

- 温馨提示：header.php插入；若为纯静态站点， 则直接放置于 ……

步骤二：将CSS样式粘贴到全局样式文件style.css或自定义CSS区域中

- 建议分块管理css ，方便后期维护；为了避免冲突，可以给容器增加命名空间class，如“spring-festival-lantern” 。

- 注意响应式媒体查询部分确保移动端体验良好。

步骤三 ：刷新页面查看效果，调整参数满足设计需求

- 可根据网站主色调自定义颜色深浅和字体样式；也可替换祝福语文本满足不同场景需求。

- 若想让动画更灵活，可调整animation-duration和关键帧细节。

---