01 这套侧边栏小工具代码的特点

• 自包含、可独立使用：卡片的所有样式、脚本和结构都在一段代码内，不依赖主题，也不影响页面其他区域。
• 自动适配宽度：代码使用 width:100%，侧边栏多宽卡片就多宽；移动端侧边栏变为全宽时也能正常显示。
• 实时新年倒计时：自动计算到下一个 1 月 1 日的天数、时、分、秒，每秒刷新，实用又有节日感。
• 纯CSS + 原生JS：零依赖、无外部请求，粘贴即用，不拖慢网站。
• 作用域隔离、不冲突：所有选择器都以 #nyw-card 为作用域，不会与博客主题样式互相干扰。

02 小工具的装饰效果

• 红金节日卡片：深红渐变背景配金色描边与顶部彩带条，一眼就是新年配色。
• 实时倒计时：天、时、分、秒四格半透明圆角单元，数字清晰、每秒自动刷新。
• 卡片内飘雪：雪花只在卡片范围内轻轻飘落，不影响正文阅读。
• 两角小宫灯：卡片左右上角各挂一盏红金小宫灯，微微摆动，增加年味。
• 双行祝福语：标题下方和底部各有一句新年祝福，可自由改写。

03 安装方法：放进侧边栏自定义HTML小工具

1. 复制完整代码：复制本文「完整代码」一节的全部内容。
2. 添加自定义HTML小工具：进入博客后台「外观 → 小工具」，把「自定义 HTML」小工具拖到侧边栏区域（WordPress 操作路径即此；Typecho 可在主题小工具或侧边栏模板中插入，Hexo 可在侧边栏 partial 中放置）。
3. 粘贴并保存：把代码整段粘贴进小工具的 HTML 输入框，保存后刷新页面即可看到倒计时卡片。

04 配置说明：改标题、祝福语和开关

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

[scp_copycode lang="php"]<!-- ==================== 元旦侧边栏小工具 v1.0 · 放入侧边栏自定义HTML小工具即生效 ==================== -->

<!-- 使用前可修改下方 script 标签顶部的 NW_CONFIG 配置（文字、颜色、各效果开关） -->

<style>

#nyw-card{

  position:relative; overflow:hidden; box-sizing:border-box; width:100%;

  background:linear-gradient(165deg,#c0392b 0%,#8e1910 55%,#6f130b 100%);

  border:2px solid #e7b74c; border-radius:14px; color:#fff;

  font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;

  padding:16px 14px 18px; text-align:center; box-shadow:0 8px 24px rgba(110,16,8,.35);

}

/* 顶部红金拉花条 */

#nyw-card .nyw-festoon{position:absolute; top:0; left:0; right:0; height:7px;

  background:repeating-linear-gradient(90deg,#e7b74c 0 18px,#c0392b 18px 24px); opacity:.9}

/* 卡片内飘雪 */

#nyw-card .nyw-snow{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:2}

/* 两角小宫灯 */

#nyw-card .nyw-lantern{position:absolute; top:14px; z-index:3; width:22px; height:44px; pointer-events:none}

#nyw-card .nyw-lantern-l{left:12px; transform-origin:top center; animation:nyw-swing 3.4s ease-in-out infinite}

#nyw-card .nyw-lantern-r{right:12px; transform-origin:top center; animation:nyw-swing 3.4s ease-in-out 1.7s infinite}

#nyw-card .nyw-lantern::before{ /* 挂绳 */

  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);

  width:2px; height:10px; background:#7a4a12; border-radius:2px}

#nyw-card .nyw-lantern::after{ /* 灯体 */

  content:""; position:absolute; top:9px; left:50%; transform:translateX(-50%);

  width:18px; height:22px; border-radius:50%;

  background:radial-gradient(circle at 38% 32%, #f7d06a, #e74c3c 55%, #a5281b);

  box-shadow:inset -3px -4px 8px rgba(120,20,10,.45)}

#nyw-card .nyw-lantern .nyw-ts{position:absolute; top:31px; left:50%; transform:translateX(-50%);

  width:2px; height:9px; background:#f1c40f}

@keyframes nyw-swing{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}

/* 标题 */

#nyw-card .nyw-title{position:relative; z-index:3; font-size:19px; font-weight:800; letter-spacing:2px;

  margin:2px 0 2px; text-shadow:0 2px 6px rgba(0,0,0,.35)}

#nyw-card .nyw-sub{position:relative; z-index:3; font-size:11px; opacity:.92; letter-spacing:1px; margin-bottom:12px}

/* 倒计时 */

#nyw-card .nyw-cd{position:relative; z-index:3; display:flex; justify-content:center; gap:7px; margin:6px 0 12px}

#nyw-card .nyw-cell{background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.25);

  border-radius:9px; padding:7px 0 5px; min-width:52px}

#nyw-card .nyw-cell b{display:block; font-size:21px; font-weight:800; font-variant-numeric:tabular-nums; line-height:1.1}

#nyw-card .nyw-cell span{font-size:10px; opacity:.88; letter-spacing:1px}

#nyw-card .nyw-wish{position:relative; z-index:3; font-size:13px; font-weight:600; letter-spacing:1px;

  color:#ffe9a8; text-shadow:0 1px 3px rgba(0,0,0,.3)}

#nyw-card .nyw-foot{position:relative; z-index:3; font-size:11px; opacity:.85; margin-top:6px}

/* 移动端（侧边栏全宽时） */

@media (max-width:560px){

  #nyw-card{padding:14px 12px 16px}

  #nyw-card .nyw-cell{min-width:48px}

}

</style>

<div id="nyw-card">

  <div class="nyw-festoon"></div>

  <canvas class="nyw-snow" id="nyw-snow-cv"></canvas>

  <div class="nyw-lantern nyw-lantern-l"><span class="nyw-ts"></span></div>

  <div class="nyw-lantern nyw-lantern-r"><span class="nyw-ts"></span></div>

  <div class="nyw-title">元旦快乐</div>

  <div class="nyw-sub">愿新的一年 · 万事胜意</div>

  <div class="nyw-cd">

    <div class="nyw-cell"><b id="nyw-d">00</b><span>天</span></div>

    <div class="nyw-cell"><b id="nyw-h">00</b><span>时</span></div>

    <div class="nyw-cell"><b id="nyw-m">00</b><span>分</span></div>

    <div class="nyw-cell"><b id="nyw-s">00</b><span>秒</span></div>

  </div>

  <div class="nyw-wish">岁岁常欢愉 · 年年皆胜意</div>

  <div class="nyw-foot">所求皆如愿 · 所行化坦途</div>

</div>

<script>

(function(){

  /* ====== 配置区：按需修改 ====== */

  var NW = {

    title: '元旦快乐', // 主标题

    sub: '愿新的一年 · 万事胜意', // 副标题

    wish: '岁岁常欢愉 · 年年皆胜意', // 祝福语

    foot: '所求皆如愿 · 所行化坦途', // 底部祝福

    snow: true, // 卡片内飘雪

    countdown: true // 倒计时（自动算到下一个1月1日00:00）

  };

  var card=document.getElementById('nyw-card');

  if(!card) return;

  if(NW.title) card.querySelector('.nyw-title').textContent=NW.title;

  if(NW.sub) card.querySelector('.nyw-sub').textContent=NW.sub;

  if(NW.wish) card.querySelector('.nyw-wish').textContent=NW.wish;

  if(NW.foot) card.querySelector('.nyw-foot').textContent=NW.foot;

  /* 倒计时 */

  if(NW.countdown){

    var dEl=document.getElementById('nyw-d'),hEl=document.getElementById('nyw-h'),

        mEl=document.getElementById('nyw-m'),sEl=document.getElementById('nyw-s');

    var target=new Date(new Date().getFullYear()+1,0,1,0,0,0);

    function pad(n){return (n<10?'0':'')+n}

    function tick(){

      var diff=target.getTime()-Date.now();

      if(diff<0){ target=new Date(target.getFullYear()+1,0,1,0,0,0); diff=target.getTime()-Date.now(); }

      dEl.textContent=pad(Math.floor(diff/86400000));

      hEl.textContent=pad(Math.floor(diff%86400000/3600000));

      mEl.textContent=pad(Math.floor(diff%3600000/60000));

      sEl.textContent=pad(Math.floor(diff%60000/1000));

    }

    tick(); setInterval(tick,1000);

  }

  /* 卡片内飘雪 */

  if(NW.snow && !window.matchMedia('(prefers-reduced-motion:reduce)').matches){

    var cv=document.getElementById('nyw-snow-cv');

    var ctx=cv.getContext('2d');

    var fl=[]; var W,H;

    function size(){ W=cv.width=card.clientWidth; H=cv.height=card.clientHeight; }

    size(); window.addEventListener('resize',size);

    for(var i=0;i<22;i++){

      fl.push({x:Math.random()*W, y:Math.random()*H, r:Math.random()*2+0.8, sp:Math.random()*0.7+0.2, ph:Math.random()*6.28, o:Math.random()*0.4+0.35});

    }

    function draw(){

      ctx.clearRect(0,0,W,H);

      for(var i=0;i<fl.length;i++){

        var f=fl[i];

        f.y+=f.sp; f.x+=Math.sin(Date.now()/500+f.ph)*0.4;

        if(f.y>H+4){ f.y=-4; f.x=Math.random()*W; }

        ctx.beginPath(); ctx.arc(f.x,f.y,f.r,0,6.283);

        ctx.fillStyle='rgba(255,255,255,'+f.o+')'; ctx.fill();

      }

      if(document.getElementById('nyw-card')) requestAnimationFrame(draw);

    }

    draw();

  }

})();

</script>

<!-- ==================== 元旦侧边栏小工具 结束 ==================== -->[/scp_copycode]06 常见问题（FAQ）

1. 我的博客没有「自定义HTML」小工具怎么办？

2. 倒计时时间准吗？

3. 会影响博客的加载速度吗？

4. 可以只保留倒计时、去掉飘雪吗？

5. 移动端显示会不会变形？