中国年
本帖最后由 杨帆 于 2026-3-2 15:50 编辑 <br /><br /><!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title>中国年▪2026元宵节倒计时</title>
</head>
<body>
<style type="text/css">
#papa{margin:30px 0;left:calc(50% - 81px);transform:translateX(-50%);width:clamp(600px,90vw,1400px);min-height:80vh;aspect-ratio:16/9;background:#180202 url('https://s3.bmp.ovh/imgs/2026/01/15/f2c4cc00bfc5f3d1.png') no-repeat center/100% 100%;box-shadow:0px 0px 2px 2px #fff,0px 0px 4px 4px #fff;overflow:hidden;z-index:1;position:relative;display:grid;place-items:center;luser-drag:none;user-select:none;animation:rotating 5s linear infinite var(--state);}
#papa::before{position:absolute;content:url('https://wimg.588ku.com/gif620/22/01/07/57eef3f535fb1ea56925950f32f58a5d.gif');scale:.3;opacity:0;transition:1.8s;display:var(--display);}
#papa:hover::before{opacity:1;scale:2;}
@keyframes rotating{0%{filter:saturate(90%) contrast(95%) brightness(95%);}50%{filter:saturate(125%) contrast(120%) brightness(120%);}100%{filter:saturate(90%) contrast(95%) brightness(95%);}}
#pic{width:25%;height:40%;position:absolute;top:0%;left:0%;z-index:1;mix-blend-mode:screen;}
#pic img{height:100%;width:100%;}
#fullscreen{position:absolute;top:8%;right:30px;font:normal 1.5em 楷体;color:#fff;text-shadow:0 0 3px #000;opacity:1;cursor:pointer;user-select:none;z-index:8;}
#fullscreen:hover{font-style:italic;}
#vid1{position:absolute;left:0px;top:-10%;width:100%;height:120%;mix-blend-mode:screen;opacity:0.8;object-fit:cover;z-index:2;}
#vid2{position:absolute;width:100%;height:120%;left:-20px;top:-10%;object-fit:cover;-webkit-mask:radial-gradient(transparent 20%, red);pointer-events:none;mix-blend-mode:screen;}
.vid{position:absolute;inset:0;left:-20%;top:-20%;width:140%;height:140%;object-fit:cover;pointer-events:none;opacity:.5;mask:linear-gradient(to bottom, red 30% ,transparent 51%,transparent);-webkit-mask:linear-gradient(to bottom, red 30% ,transparent 51%,transparent);object-position:center;}
#player{position:absolute;z-index:8;left:1%;bottom:10%;width:168px;height:96px;border:0px solid #cccccc;border-radius:50%;opacity:1;cursor:pointer;background:var(--bg1),var(--bg2);--bg1:url('https://s3.bmp.ovh/imgs/2025/12/29/35ae6387f7b5758c.gif') no-repeat center/cover;--bg2:url('https://s3.bmp.ovh/imgs/2026/01/15/65fd8a3d8883426d.png') no-repeat center/cover;transition:.3s;rotate:-5deg;animation:flash 0.5s infinite alternate var(--state), shake 1s infinite var(--state);}
@keyframes shake{from{transform:rotate(-3deg);}to{transform:rotate(3deg);}}
@keyframes flash{to{filter:hue-rotate(360deg);}}
.lrc{position:absolute;width:100%;height:120px;overflow:hidden;display:block;top:16%;left:2%;z-index:7;margin:0 auto;}
.lrc #ullrc li{height:70px;line-height:60px;font-family:华文行楷;font-size:0px;color:#000078;font-weight:bold;transition:.3s all ease;list-style-type:none;text-align:center;display:block;width:100%;margin:0 auto;}
.lrc #ullrc li.active{font-size:55px;text-align:center;color:transparent;background:repeating-linear-gradient(to right, gold, lightgreen) 50%/100px 80px;-webkit-background-clip:text;filter:drop-shadow(#000 1px 0 0)drop-shadow(#000 0 1px 0)drop-shadow(#000 -1px 0 0) drop-shadow(#000 0 -1px 0);}
#fucharacter{position:absolute;top:7%;left:30px;font-size:clamp(4em, 6em, 8em);color:red;cursor:pointer;font-family:隶书;z-index:10;text-shadow:0 0 15px gold;animation:fu-rotate 8s infinite linear var(--state);transform-origin:center;opacity:0.9;}
@keyframes fu-rotate{0%{transform:rotate(0deg) scale(1);}50%{transform:rotate(180deg) scale(1.2);}100%{transform:rotate(360deg) scale(1);}}
.container{position:absolute;display:grid;place-items:center;left:72.5%;top:70%;width:340px;height:188px;opacity:.8;z-index:5;--dance-duration:.8s;animation:sway var(--dance-duration) -1s linear infinite alternate var(--state);background-blend-mode:darken;padding:15px;display:inline-block;border-radius:10px;background:#1E90FF;color:#7CFC00;border-left:8px solid #e91e63;}
@keyframes sway{from{rotate(-1deg);}to{transform:rotate(1deg);}}
.container h1{font-weight:bold; font-family:华文新魏;font-size:2.1em;margin-top:10px;margin-bottom:20px;}
.container #countdown{font-size:1.5em;margin-bottom:20px;}
.time-box {display:inline-block;margin:0 10px;padding:10px;background:#FF3030;color:#FFD700;border-radius:5px;}
.time-box span {display:block;font-size:1.2em;}
.time-box b {font-size:1.2em;}
#picc{width:10%;height:30%;position:absolute;top:0%;left:0%;z-index:1;mix-blend-mode:screen;}
#picc img{height:100%;width:100%;}
#textClock{position:absolute;bottom:2%;left:1%;font:normal 2em 华文隶书;color:Yellow;box-shadow:2px 2px 4px #000;z-index:5;}
#msvg{position:absolute;bottom:7%;right:-15%;width:60%;height:40%;opacity:1;z-index:3;}
#baiBox{position:absolute;width:100%;height:auto;line-height:1.5;left:0;top:1%;z-index:8;overflow:hidden;white-space:nowrap;}
#baiBox .tit{position:relative;display:inline-block;font:bold 2.2em/1.5 STXingkai;filter:drop-shadow(#fff 1px 0 0) drop-shadow(#fff 0 1px 0) drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px 0);color:#e91e63;letter-spacing:4px;transition:all .5s ease;animation:scroll-left 20s linear infinite var(--state);}
#baiBox:hover .tit{filter:hue-rotate(0deg);transform:scale(1.2);animation-play-state:paused!important;}
@keyframes scroll-left{0%{transform:translateX(0%);}100%{transform:translateX(-50%);}}
#mplayer{position:absolute;text-align:center;top:95%;transform:translate(-50%);left:50%;z-index:60;color:#ffffff;}
#mplayer::before{position:absolute;content:attr(data-tt);left:0;bottom:25px;width:100%;text-align-last:justify;}
#mprog{width:400px;height:2px;accent-color:darkgreen;outline:none;cursor:pointer;}
</style>
<div id="papa"><div id="mplayer" data-tt="00:00 00:00">
<input id="mprog" type="range" min="0" max="100" step="any" value="0" title="调节进度"/></div>
<div id="fucharacter" title="播放/暂停">福</div>
<div class="container">
<h1>2026新春元宵节倒计时</h1>
<div id="countdown">
<div class="time-box"><span>天</span><b id="days"></b></div>
<div class="time-box"><span>时</span><b id="hours"></b></div>
<div class="time-box"><span>分</span><b id="minutes"></b></div>
<div class="time-box"><span>秒</span><b id="seconds"></b></div>
</div></div>
<span id="fullscreen">全屏欣赏</span>
<div id="textClock"></div>
<div id="baiBox">
<div class="tit">
<span>在马年春节的脚步声越来越近之际，由衷感谢各位朋友对花潮动画音画版块的支持与厚爱！由衷祝福花潮各位朋友平安健康，家庭幸福，新春快乐，马年大吉~</span>
<span>在马年春节的脚步声越来越近之际，由衷感谢各位朋友对花潮动画音画版块的支持与厚爱！由衷祝福花潮各位朋友平安健康，家庭幸福，新春快乐，马年大吉~</span>
</div>
</div>
<svg id="svg" width="100%" height="100%" viewBox="0 0 1600 900">
<defs>
<g id="svgShape">
<image x="0" y="0" width="80" height="80" href="https://pic1.imgdb.cn/item/68e4fcf2c5157e1a885b437f.png" />
</g>
<path id="motionPath" d="M400 0 L600 1000" />
</defs>
</svg>
<svg id="msvg" xmlns="http://www.w3.org/2000/svg" viewBox="-200 -100 400 200">
<defs>
<linearGradient id="lGrd" gradientTransform="rotate(45)">
<stop offset="5%" stop-color="LightCyan" />
<stop offset="35%" stop-color="Beige" />
<stop offset="95%" stop-color="Snow" />
</linearGradient>
</defs>
</svg>
<div id="pic"><img id="Img" src="https://wimg.588ku.com/gif620/21/09/30/f146bcdc795604d57c4bda36ef1ef710.gif" alt="" /></div>
<video id="vid1" src="https://img.tukuppt.com/video_show/2269348/00/14/15/5e1c05d86785e.mp4" autoplay loop muted></video>
<video id="vid2" src="https://bpic.588ku.com/video_listen/588ku_video/24/12/25/16/14/01/video676bbec9ced44.mp4" autoplay loop muted></video>
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/11329da50cd973e2bf4d21c6c6f467f3_preview.mp4" autoplay loop muted></video>
<div id="player" title="播放/暂停" alt=""/></div>
<div class="lrc">
<ul id="ullrc"></ul>
</div>
<audio id="aud" src="https://www.joy127.com/url/142308.mp3" loop autoplay></audio>
</div>
<script type="module">
import Dr from 'https://638183.freep.cn/638183/svgdr/svgdr.mod.min.js';
const msvg = document.getElementById('msvg');
var dr = Dr.dr('msvg');
const txt = '中国年';
const path = 'M-120 60 A120 120 0 0 1 120 60';
dr.setsvg({style:'background: none;'});
dr.defs('defs');
dr.path(path,'Gold','olive').id('tpath').addTo('defs');
dr.text(txt).style(`font:bold 30px sans-serif;color:gold;fill:var(--bgg);stroke:url(#lGrd);stroke-width:2;text-anchor:middle;dominant-baseline:middle;`).sets({textLength:150,lengthAdjust:'spacing'}).textPath('tpath','50%');
let createHueColors = () => {
var a = Math.round(Math.random() * 360);
return {c:`hsl(${a}, 100%, 50%)`};
};
window.addEventListener('DOMContentLoaded', () => {
const initialColor = createHueColors();
papa.style.setProperty('--bgg',initialColor.c);
});
</script>
<script>
const vids = document.querySelectorAll(', .vid');
var mState = () => {
player.style.setProperty('--state',aud.paused?'paused':'running');
papa.style.setProperty('--state',aud.paused?'paused':'running');
papa.style.setProperty('--display',aud.paused?'none':'');
aud.paused?image0.stop():image0.play();
player.style.setProperty('--bg2',aud.paused?'':'none');
player.style.setProperty('--bg1',aud.paused?'none':'');
vids.forEach(vid => aud.paused?vid.pause():vid.play());
};
aud.oncanplay = aud.onplaying = aud.onpause = () => mState();
fucharacter.onclick = player.onclick = () => aud.paused?aud.play():aud.pause();
if('getContext' in document.createElement('canvas')){
HTMLImageElement.prototype.play = function(){
if(this.storeCanvas){
this.storeCanvas.parentElement.removeChild(this.storeCanvas);
this.storeCanvas = null;
image0.style.opacity = '';
}
if(this.storeUrl){
this.src = this.storeUrl;
}
};
HTMLImageElement.prototype.stop = function(){
var canvas = document.createElement('canvas');
var width = this.width, height = this.height;
if(width && height){
if(!this.storeUrl){
this.storeUrl = this.src;
}
canvas.width = width;
canvas.height = height;
canvas.getContext('2d').drawImage(this,0,0,width,height);
try{
this.src = canvas.toDataURL("image/gif");
}catch(e){
this.removeAttribute('src');
canvas.style.position = 'absolute';
this.parentElement.insertBefore(canvas,this);
this.style.opacity = '0';
this.storeCanvas = canvas;
}
}
};
}
var image0= document.getElementById("Img");
const audio = document.getElementById('aud');
const mplayer = document.getElementById('mplayer');
const mprog = document.getElementById('mprog');
var mseek = false;
let toMin = (val) => {
if(!val) return '00:00';
val = Math.floor(val);
let min = parseInt(val / 60),sec = parseFloat(val % 60);
if(min < 10) min = '0' + min;
if(sec < 10) sec = '0' + sec;
return min + ':' + sec;
}
audio.addEventListener('timeupdate', () => {
if(!mseek) mprog.value = audio.currentTime / audio.duration * mprog.max;
mplayer.dataset.tt = toMin(audio.currentTime) + ' ' + toMin(audio.duration);
});
mprog.onmousedown = () => mseek = true;
mprog.onmouseup = () => mseek = false;
mprog.onchange = () => audio.currentTime = mprog.value / mprog.max * audio.duration;
var lrc = `
中国年
作词：师立宅
作曲：郑明河
演唱：任妙音
录混：郑硕
说唱：祁隆
制作：祁隆
举一杯美酒大家共祝愿
幸福的生活比呀比蜜甜
年年有余喜事连连
神州大地处处春色满园
贴一副对联福字在中间
大街和小巷鞭炮响连天
载歌载舞青春永驻
江山如画处处百花争艳
中国年是吉祥的新年
家家户户张灯结彩笑语连篇
中国年是幸福的新年
红红火火团团圆圆美如画卷
中国年是吉祥的新年
亲朋好友左邻右舍欢乐无限
中国年是幸福的新年
和和美美健健康康平平安安
贴一副对联福字在中间
大街和小巷鞭炮响连天
载歌载舞青春永驻
江山如画处处百花争艳
中国年是吉祥的新年
家家户户张灯结彩笑语连篇
中国年是幸福的新年
红红火火团团圆圆美如画卷
中国年是吉祥的新年
亲朋好友左邻右舍欢乐无限
中国年是幸福的新年
和和美美健健康康平平安安
说唱
中国年是吉祥的新年
家家户户张灯结彩笑语连篇
大街和小巷锣鼓喧天
红红火火团团圆圆美如画卷
中国年是幸福的新年
亲朋好友左邻右舍欢乐无限
载歌载舞快乐无边青春永驻
和和美美健健康康平平安安
中国年是吉祥的新年
亲朋好友左邻右舍欢乐无限
中国年是幸福的新年
和和美美健健康康平平安安
和和美美健健康康平平安安
`;
function $(id){
return document.getElementById(id);
}
function getLrcArray(){
var parts = lrc.split("\n");
for(let index = 0; index < parts.length; index++){
parts = getLrcObj(parts);
}
return parts;
function getLrcObj(content){
var twoParts = content.split("]");
var time = twoParts.substr(1);
var timeParts = time.split(":");
var seconds = +timeParts;
var min = +timeParts;
seconds = min * 60 + seconds;
var words = twoParts;
return{seconds:seconds,words:words};
}
}
var lrcArray = getLrcArray();
function inputLrc(){
for(let index = 0; index < lrcArray.length; index++){
var li = document.createElement("li");
li.innerText = lrcArray.words;
$("ullrc").appendChild(li);
}
}
inputLrc();
function setPosition(){
var index = getLrcIndex();
if(index == -1){
return;
}
var lrc_li_height = 70, lrc_ul_height = 60;
var top = index * lrc_li_height + lrc_li_height / 3 - lrc_ul_height / 3;
if(top < 0){
top = 0;
}
$("ullrc").style.marginTop = -top + "px";
var activeLi = $("ullrc").querySelector(".active");
if(activeLi){
activeLi.classList.remove("active");
}
$("ullrc").children.classList.add("active");
}
var turn = 0;
function getLrcIndex(){
var time = $("aud").currentTime + turn;
for(var index = 0; index < lrcArray.length; index++){
if(lrcArray.seconds > time){
return index - 1;
}
}
}
$("aud").ontimeupdate = setPosition;
function updateCountdown(){
const targetDate = new Date('March 3, 2026 00:00:00').getTime();
const now = new Date().getTime();
const timeDifference = targetDate - now;
if (timeDifference <= 0) {
document.getElementById('days').textContent = '00';
document.getElementById('hours').textContent = '00';
document.getElementById('minutes').textContent = '00';
document.getElementById('seconds').textContent = '00';
return;
}
const days = Math.floor(timeDifference / (1000 * 60 * 60 * 24));
const hours = Math.floor((timeDifference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((timeDifference % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((timeDifference % (1000 * 60)) / 1000);
document.getElementById('days').innerText = days;
document.getElementById('hours').innerText = hours;
document.getElementById('minutes').innerText = minutes;
document.getElementById('seconds').innerText = seconds;
}
setInterval(updateCountdown,1000);
updateCountdown();
let fs = true;
let fsTimer;
fullscreen.onclick = () => {
fs?(fullscreen.innerText='退出全屏',papa.requestFullscreen()):(fullscreen.innerText='全屏欣赏',document.exitFullscreen());
fs = !fs;
};
papa.addEventListener('mousemove', () => {
clearTimeout(fsTimer);
fullscreen.style.opacity = '1';
fsTimer = setTimeout(() => {
fullscreen.style.opacity = '0';
},3000);
});
showTime();
setInterval(showTime,1000);
function showTime(){
var now = new Date();
var year = now.getFullYear();
var month = now.getMonth() + 1;
var date = now.getDate();
var day = now.getDay();
var hour = now.getHours();
if(hour < 10) hour = "0" + hour;
var minute = now.getMinutes();
if(minute < 10) minute = "0" + minute;
var second = now.getSeconds();
if(second < 10) second = "0" + second;
document.getElementById("textClock").innerHTML = year + "年" + month + "月" + date + "日 星期" + toHz(day) + "" + hour + ":" + minute + ":" + second;
}
function toHz(num){
var hz = "日一二三四五六";
return(hz.charAt(num));
}
</script>
</body>
</html> 春节倒计时{:5_106:}
今天腊月初二 {:4_199:} 下面的倒计时真好。 过年啦。。 来欣赏杨帆老师的精品佳作！
音画太棒了！满满的年味！
视频充满热热闹闹的过年气氛！
视频充满过年热热闹闹的气氛！
背景歌声动听
制作大气磅礴
音画合一，歌曲与画面结合完美
玫瑰花☆╮╮芍药花☆╮╰☆☆╮合欢花花～【*偶然 献花给你啦】
感谢杨帆老师带来的精彩，辛苦了！祝你开心幸福、阖家安康！ 也曾年轻 发表于 2026-1-20 13:17
春节倒计时
今天腊月初二
谢谢也曾年轻老师鼓励，预祝新春快乐，马年大吉，万事如意{:4_176:} 马黑黑 发表于 2026-1-20 14:05
感动支持，感谢鼓励，感恩指导~
预祝马黑黑老师新春快乐，马年大吉，万事如意{:4_176:} 梦油 发表于 2026-1-20 14:12
下面的倒计时真好。
谢谢梦兄鼓励，预祝新春快乐，马年大吉，万事如意{:4_190:} 偶然~ 发表于 2026-1-20 14:41
过年啦。。
是啊，时光荏苒，岁月如梭。谢谢偶然~兄弟鼓励~预祝新春快乐，马年大吉，万事如意{:4_191:} 杨帆 发表于 2026-1-20 15:18
是啊，时光荏苒，岁月如梭。谢谢偶然~兄弟鼓励~预祝新春快乐，马年大吉，万事如意
大寒时节天地寒，
冰封万里草木残。
寒已极，暖将浮，
且备薄酒迎新春。 哈哈，真热闹！过年倒计时了！{:4_187:} 梦江南 发表于 2026-1-20 15:53
哈哈，真热闹！过年倒计时了！
谢谢江南鼓励~预祝新春快乐，马年大吉，万事如意{:4_204:}
页:
[1]
2