1. 维形筑网首页
  2. 未分类

博客页尾元旦装饰代码：纯CSS+JS一键美化你的网站（附完整代码）

• 未分类 • 阅读 25088
新年临近，给你的博客网站添一点节日氛围是很多站长的共同想法。一套轻量的元旦装饰代码，既不用改主题结构，也不用装任何插件，把代码整段复制到博客页尾就能让飘雪、灯笼、烟花和金色星尘在你的全站页面优雅呈现。本文提供一套即贴即用的博客页尾装饰代码，包含完整代码、安装步骤、配置说明和常见问题，适合所有支持在页尾注入自定义代码的博客系统。
博客页尾元旦装饰代码：纯CSS+JS一键美化你的网站（附完整代码）

01 这套元旦装饰代码的特点

相比网上零散的网页装饰片段，这套元旦网站装饰代码在设计和实现上有几个实用优势，站长和开发者可以直接放心使用。
  • 纯CSS + 原生JavaScript：无任何外部依赖、不加载第三方库，粘贴即用，也不会有请求慢、被外链拖垮性能的问题。
  • 零冲突、可开关：所有类名都以 ny2026- 前缀开头，不会和博客主题样式冲突；每一项效果都能在配置里独立开关。
  • 全站生效：代码使用 fixed 定位挂在页面上，放入页尾后所有页面都会显示节日装饰，不用逐个页面添加。
  • 不遮挡交互：装饰层全部设置为 pointer-events:none，雪花、灯笼、烟花都不会挡住正文点击。
  • 响应式与无障碍：手机端自动缩小适配，同时尊重系统「减弱动态效果」设置，自动关闭动画，照顾有眩晕等需求的访客。

02 装饰效果一览

这套博客元旦美化代码一共包含六项效果，可以自由组合，按节日氛围决定开哪些、关哪些。
  • 顶部彩球拉花：一串红金相间的彩球垂挂在页面顶端，轻微上下跳动，节日感立刻拉满。
  • 飘雪效果：轻盈的白色雪花在全屏缓缓飘落，营造冬日氛围，雪花数量可调。
  • 金色星尘：金色光点从底部缓缓上升、闪烁，让页面更有年味和灵动感。
  • 自动绽放烟花：页面每隔几秒自动绽放一束红金配色的烟花，点击任意位置也会绽放，互动性强。
  • 六角宫灯：页面左右两角各挂一盏带「福」字纹的红金宫灯，轻轻摆动，是最有年味的部分。
  • 点击彩带：点击页面任意位置绽放彩色粒子，给访客一个小惊喜。

03 安装方法：把代码放到博客页尾

安装这套博客页尾装饰代码很简单，整个流程只需要三步，所有常见博客系统都适用。
  1. 复制完整代码：直接复制本文「完整代码」一节的全部内容。
  2. 找到页尾编辑位置：进入博客后台，找到「页尾 / Footer / 自定义代码」的编辑入口。不同系统位置略有差异——WordPress 可在「外观 → 主题文件编辑器」的 footer.php 或「自定义代码」插件中粘贴；Typecho、Hexo 等一般也在页尾模板或主题设置里。
  3. 粘贴并保存：把代码整段粘贴进去，保存后刷新站点即可看到效果。代码会自动注入，不需要额外操作。

04 配置说明：改文字、颜色和开关

代码顶部的 CFG 配置对象集中了所有可调整项，改起来一目了然，适合网页装饰个性化定制。
配置项
默认值
作用说明
festoon
true
顶部彩球拉花开关
snow / snowCount
true / 60
飘雪开关与雪花数量，数量越大越密
gold / goldCount
true / 42
金色星尘开关与光点数量
fireworks
true
自动烟花与点击烟花开关
lantern
true
左右两角六角宫灯开关
confetti
true
点击彩带开关
想要调整宫灯的「福」字、彩球配色或布局，直接修改对应 CSS 区块中的颜色值即可，全部集中在 style 标签内，方便统一管理。

05 完整代码：直接复制使用

下面是这套博客元旦装饰代码的完整内容。直接整段复制，粘贴到博客页尾即可生效，无需任何修改即可体验全部效果。

[scp_copycode lang="php"]

<!-- ==================== 元旦博客装饰 v3.2 · 放入页尾即生效 ==================== --> <!-- 使用前可修改下方 script 标签顶部的 NY2026_CONFIG 配置（文字、颜色、各效果开关） --> <style> /* ========== 顶部彩球拉花 ========== */ .ny2026-festoon{ position:fixed; top:0; left:0; right:0; height:24px; z-index:9995; pointer-events:none; display:flex; justify-content:space-around; align-items:flex-start; padding:0 6px; } .ny2026-festoon .ny2026-ball{ display:block; width:14px; height:14px; border-radius:50%; background:radial-gradient(circle at 35% 30%, #fff3bf, #e74c3c 55%, #8a1414); box-shadow:0 3px 7px rgba(0,0,0,.18); animation:ny2026-ball 2.4s ease-in-out infinite; } .ny2026-festoon .ny2026-ball:nth-child(even){animation-delay:1.2s; background:radial-gradient(circle at 35% 30%,#fff8d6,#f1c40f 55%,#9a7a06)} @keyframes ny2026-ball{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}} /* ========== 飘雪 ========== */ .ny2026-snow{position:fixed; inset:0; width:100%; height:100%; z-index:9997; pointer-events:none} /* ========== 金色星尘 ========== */ .ny2026-gold{position:fixed; inset:0; width:100%; height:100%; z-index:9996; pointer-events:none} /* ========== 烟花 ========== */ .ny2026-fireworks{position:fixed; inset:0; width:100%; height:100%; z-index:9999; pointer-events:none} /* ========== 花灯（页面两角，六角宫灯样式） ========== */ .ny2026-lantern{position:fixed; top:0; z-index:9994; width:86px; height:158px; pointer-events:none} .ny2026-lantern-l{left:12px; transform-origin:top center; animation:ny2026-swing 3.6s ease-in-out infinite} .ny2026-lantern-r{right:12px; transform-origin:top center; animation:ny2026-swing 3.6s ease-in-out 1.8s infinite} /* 挂绳 */ .ny2026-lantern .ny2026-rope{ position:absolute; top:0; left:50%; transform:translateX(-50%); width:3px; height:28px; background:linear-gradient(#6a4210,#9a6a1a); border-radius:2px; } /* 顶部宝盖 */ .ny2026-lantern .ny2026-cap{ position:absolute; top:26px; left:50%; transform:translateX(-50%); width:74px; height:16px; background:linear-gradient(180deg,#f9e79d,#d9a441); border-radius:9px 9px 5px 5px; box-shadow:0 2px 5px rgba(120,80,10,.45); } .ny2026-lantern .ny2026-cap::before{ content:""; position:absolute; top:-7px; left:50%; transform:translateX(-50%); width:14px; height:9px; background:#e7b74c; border-radius:50% 50% 4px 4px; } .ny2026-lantern .ny2026-cap::after{ content:""; position:absolute; bottom:-3px; left:50%; transform:translateX(-50%); width:80px; height:5px; background:linear-gradient(90deg,#c9932f,#f9e79d,#c9932f); border-radius:2px; } /* 灯体：圆润花灯，带竖骨架 + 福字 */ .ny2026-lantern .ny2026-body{ position:absolute; top:44px; left:50%; transform:translateX(-50%); width:76px; height:90px; background: repeating-linear-gradient(90deg, rgba(255,230,150,0) 0 9px, rgba(255,230,150,.26) 9px 10px), radial-gradient(circle at 38% 30%, #f26a52, #c9251b 58%, #7e0f0a); border-radius:50% 50% 45% 45%; box-shadow:0 8px 22px rgba(120,16,8,.5), inset 0 -16px 26px rgba(120,15,8,.55), inset 0 8px 16px rgba(255,200,120,.16); } .ny2026-lantern .ny2026-body::before{ content:"福"; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); color:#ffe9a8; font-size:28px; font-family:"KaiTi","STKaiti","楷体",serif; text-shadow:0 1px 3px rgba(0,0,0,.4); opacity:.94; } .ny2026-lantern .ny2026-body::after{ content:""; position:absolute; top:9px; bottom:9px; left:50%; transform:translateX(-50%); width:2px; background:rgba(255,233,168,.4); } /* 下沿 */ .ny2026-lantern .ny2026-rim{ position:absolute; top:132px; left:50%; transform:translateX(-50%); width:78px; height:6px; background:linear-gradient(90deg,#c9932f,#f9e79d,#c9932f); border-radius:3px; } /* 红黄流苏 */ .ny2026-lantern .ny2026-tassel{ position:absolute; top:138px; left:50%; transform:translateX(-50%); width:16px; height:22px; background:repeating-linear-gradient(0deg,#e74c3c 0 3px,#f1c40f 3px 4px); border-radius:0 0 6px 6px; opacity:.95; } @keyframes ny2026-swing{ 0%,100%{transform:rotate(-7deg)} 50%{transform:rotate(7deg)} } /* ========== 点击彩带 ========== */ .ny2026-confetti{position:fixed; inset:0; z-index:10000; pointer-events:none} /* 尊重系统「减弱动态效果」偏好：关闭动画 */ @media (prefers-reduced-motion:reduce){ .ny2026-lantern,.ny2026-lantern-l,.ny2026-lantern-r, .ny2026-festoon .ny2026-ball{animation:none !important; transition:none !important} } </style> <script> (function(){ /* ====== 配置区：按需修改 ====== */ var CFG = { festoon: true, // 顶部彩球拉花 snow: true, // 飘雪 snowCount: 60, // 雪花数量 gold: true, // 金色星尘漂浮 goldCount: 42, // 星尘数量 fireworks: true, // 烟花（自动绽放 + 点击绽放） lantern: true, // 页面两角六角宫灯 confetti: true // 点击任意位置绽放彩带 }; if(window.matchMedia('(prefers-reduced-motion:reduce)').matches){ CFG.snow=false; CFG.gold=false; } function $(tag, cls){ var e=document.createElement(tag); if(cls) e.className=cls; return e; } /* ---------- 顶部彩球拉花 ---------- */ if(CFG.festoon){ var fest=$('div','ny2026-festoon'); var nBalls=14; for(var i=0;i<nBalls;i++) fest.appendChild($('i','ny2026-ball')); document.body.appendChild(fest); } /* ---------- 飘雪 ---------- */ if(CFG.snow){ var snow=document.createElement('canvas'); snow.className='ny2026-snow'; var sctx=snow.getContext('2d'); var flakes=[]; var W,H; function size(){ W=snow.width=window.innerWidth; H=snow.height=window.innerHeight; } size(); window.addEventListener('resize',size); for(var i=0;i<CFG.snowCount;i++){ flakes.push({x:Math.random()*W, y:Math.random()*H, r:Math.random()*3+1.5, sp:Math.random()*1.2+0.4, ph:Math.random()*Math.PI*2, o:Math.random()*0.5+0.4}); } function drawSnow(){ sctx.clearRect(0,0,W,H); for(var i=0;i<flakes.length;i++){ var f=flakes[i]; f.y+=f.sp; f.x+=Math.sin(Date.now()/600+f.ph)*0.4; if(f.y>H+5){ f.y=-5; f.x=Math.random()*W; } sctx.beginPath(); sctx.arc(f.x,f.y,f.r,0,Math.PI*2); sctx.fillStyle='rgba(255,255,255,'+f.o+')'; sctx.fill(); } if(document.body.contains(snow)) requestAnimationFrame(drawSnow); } document.body.appendChild(snow); drawSnow(); } /* ---------- 金色星尘 ---------- */ if(CFG.gold){ var gold=document.createElement('canvas'); gold.className='ny2026-gold'; var gctx=gold.getContext('2d'); var gparts=[]; var GW,GH; function gsize(){ GW=gold.width=window.innerWidth; GH=gold.height=window.innerHeight; } gsize(); window.addEventListener('resize',gsize); for(var i=0;i<CFG.goldCount;i++){ gparts.push({x:Math.random()*GW, y:Math.random()*GH, r:Math.random()*2+0.8, vy:Math.random()*0.5+0.2, ph:Math.random()*Math.PI*2, tw:Math.random()*0.05+0.02, o:Math.random()*0.5+0.4}); } function drawGold(){ gctx.clearRect(0,0,GW,GH); for(var i=0;i<gparts.length;i++){ var p=gparts[i]; p.y-=p.vy; p.ph+=p.tw; if(p.y<-10){ p.y=GH+10; p.x=Math.random()*GW; } var a=p.o*(0.55+0.45*Math.sin(p.ph)); gctx.globalAlpha=Math.max(a,0); gctx.fillStyle='#ffd700'; gctx.beginPath(); gctx.arc(p.x,p.y,p.r,0,Math.PI*2); gctx.fill(); gctx.globalAlpha=Math.max(a,0)*0.55; gctx.fillRect(p.x-4,p.y-0.6,8,1.2); gctx.fillRect(p.x-0.6,p.y-4,1.2,8); } gctx.globalAlpha=1; if(document.body.contains(gold)) requestAnimationFrame(drawGold); } document.body.appendChild(gold); drawGold(); } /* ---------- 烟花（自动 + 点击） ---------- */ if(CFG.fireworks){ var fw=document.createElement('canvas'); fw.className='ny2026-fireworks'; var fctx=fw.getContext('2d'); var fparts=[]; function fsize(){ fw.width=window.innerWidth; fw.height=window.innerHeight; } fsize(); window.addEventListener('resize',fsize); document.body.appendChild(fw); var fcolors=['#ffd700','#ff6b6b','#ffa500','#ff4d4d','#fff3bf','#ffb84d','#f1c40f']; function burst(x,y,big){ var n=big?70:40; for(var i=0;i<n;i++){ var ang=Math.random()*Math.PI*2; var vel=Math.random()*(big?9:5)+2; fparts.push({x:x,y:y,vx:Math.cos(ang)*vel,vy:Math.sin(ang)*vel, d:0.98,g:0.05,r:Math.random()*2.5+1,c:fcolors[i%fcolors.length],life:1}); } } var reduced=window.matchMedia('(prefers-reduced-motion:reduce)').matches; function auto(){ if(document.body.contains(fw)) burst(Math.random()*fw.width, Math.random()*fw.height*0.55, true); } if(!reduced){ auto(); setInterval(auto, 2400); } document.addEventListener('click',function(ev){ if(document.body.contains(fw)) burst(ev.clientX,ev.clientY,false); }); function drawFW(){ fctx.clearRect(0,0,fw.width,fw.height); for(var i=fparts.length-1;i>=0;i--){ var p=fparts[i]; p.vx*=p.d; p.vy=p.vy*p.d+p.g; p.x+=p.vx; p.y+=p.vy; p.life-=0.012; if(p.life<=0){ fparts.splice(i,1); continue; } fctx.globalAlpha=Math.max(p.life,0); fctx.fillStyle=p.c; fctx.beginPath(); fctx.arc(p.x,p.y,p.r,0,Math.PI*2); fctx.fill(); } fctx.globalAlpha=1; if(document.body.contains(fw)) requestAnimationFrame(drawFW); } drawFW(); } /* ---------- 六角宫灯（页面两角） ---------- */ if(CFG.lantern){ function makeLantern(side){ var box=$('div','ny2026-lantern ny2026-lantern-'+side); box.appendChild($('div','ny2026-rope')); box.appendChild($('div','ny2026-cap')); box.appendChild($('div','ny2026-body')); box.appendChild($('div','ny2026-rim')); box.appendChild($('div','ny2026-tassel')); document.body.appendChild(box); } makeLantern('l'); makeLantern('r'); } /* ---------- 点击彩带 ---------- */ if(CFG.confetti){ var cv=document.createElement('canvas'); cv.className='ny2026-confetti'; var cctx=cv.getContext('2d'); var parts=[]; function csize(){ cv.width=window.innerWidth; cv.height=window.innerHeight; } csize(); window.addEventListener('resize',csize); document.body.appendChild(cv); var colors=['#e74c3c','#f1c40f','#2ecc71','#3498db','#e67e22','#9b59b6','#1abc9c','#ffffff']; document.addEventListener('click',function(ev){ var x=ev.clientX, y=ev.clientY; for(var i=0;i<40;i++){ var ang=Math.random()*Math.PI*2; var vel=Math.random()*7+2; parts.push({x:x,y:y,vx:Math.cos(ang)*vel,vy:Math.sin(ang)*vel-3, g:0.15, r:Math.random()*5+3, c:colors[i%colors.length], life:1, rot:Math.random()*6.28, vr:Math.random()*0.3-0.15}); } }); function drawConf(){ cctx.clearRect(0,0,cv.width,cv.height); for(var i=parts.length-1;i>=0;i--){ var p=parts[i]; p.vy+=p.g; p.x+=p.vx; p.y+=p.vy; p.rot+=p.vr; p.life-=0.012; if(p.life<=0){ parts.splice(i,1); continue; } cctx.save(); cctx.translate(p.x,p.y); cctx.rotate(p.rot); cctx.globalAlpha=Math.max(p.life,0); cctx.fillStyle=p.c; cctx.fillRect(-p.r/2,-p.r,p.r,p.r*1.6); cctx.restore(); } if(document.body.contains(cv)) requestAnimationFrame(drawConf); } drawConf(); } })(); </script> <!-- ==================== 元旦装饰结束 ==================== -->

[/scp_copycode]

06 常见问题（FAQ）

1. 我的博客后台没有「页尾自定义代码」入口怎么办？

多数主题都在「页尾 / Footer」模板中留有自定义位置。若找不到，可以安装一个「自定义代码 / Header and Footer Scripts」类插件，把这段代码粘贴到页尾脚本区域，效果完全相同。

2. 装饰会不会拖慢网站加载速度？

不会。代码是纯 CSS 和原生 JS，无外部请求、无第三方库，体积很小；动画由 Canvas 轻量驱动，对性能影响可忽略。

3. 手机端显示效果如何？

代码内置响应式适配，窄屏下彩球、灯笼会自动缩小，布局不乱；同时遵循系统「减弱动态效果」偏好，系统开启后动画会自动关闭。

4. 可以只保留某几个效果吗？

可以。在 CFG 配置里把不需要的效果对应项改成 false 即可，例如只想要飘雪和灯笼，把 festoon、gold、fireworks、confetti 都设为 false。

5. 会与主题的样式冲突吗？

不会。所有类名都以 ny2026- 前缀命名，且装饰层固定定位、不遮挡交互，与绝大多数主题样式天然隔离。

原创文章，如若转载，请注明出处：维形筑网https://wxzcw.com/30-2/

赞 (2)
上一篇 2026年10月14日 上午12:26
下一篇 2026年10月18日 下午9:59

相关推荐