岁月如笔写春秋

杨帆发表于 2026-6-30 13:25

本帖最后由杨帆于 2026-6-30 17:50 编辑 <br /><br /><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="referrer" content="never"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>岁月如笔写春秋</title>
<style>
@import url("https://fonts.googleapis.com/css2?family=Liu+Jian+Mao+Cao&family=Long+Cang&family=Ma+Shan+Zheng&family=ZCOOL+KuaiLe&family=ZCOOL+QingKe+HuangYou&display=swap");
#papa{margin:30px 0; left:calc(50% - 81px);transform:translateX(-50%);width:1280px;aspect-ratio:16/9;background:url('https://638183.freep.cn/638183/small/opic.jpg') no-repeat center/cover;box-shadow:2px 2px 8px #000;z-index:1;overflow:hidden;position:relative;--state:running;display:grid;place-items:center;}
#player{position:absolute;left:95px;top:95px;aspect-ratio:5/3;width:50px;transform-origin:100% 100%;animation:rot 6s linear infinite var(--state);cursor:pointer;z-index:10;}
.petal{position:absolute;inset:0;background:radial-gradient(circle at 10% 10%,red,orange);border-radius:0% 90% 0 90%;box-shadow:inset 0 0 30px gold,2px 4px 16px rgba(0,0,0,.5);transform-origin:100% 100%;}
.p1{transform:rotate(0deg);}
.p2{transform:rotate(72deg);}
.p3{transform:rotate(144deg);}
.p4{transform:rotate(216deg);}
.p5{transform:rotate(288deg);}
#player:hover .petal{transition:transform 0.12s ease;scale:1.1;filter:unset !important;}
#player::after{content:'';position:absolute;top:100%;left:100%;width:10px;height:10px;border-radius:50%;background:rgb(248,243,235,.75);transform:translate(-50%,-50%);z-index:10;box-shadow:0 0 8px Gold;}
#fullscreen{position:absolute;top:20px;right:20px;font:normal 1.5em 楷体;color:#fff;text-shadow:0 0 3px #000;opacity:1;cursor:pointer;z-index:10;}
#fullscreen:hover{font-style:italic;}
#statusDisplay{position:absolute;z-index:3;font-size:1.5em;font-weight:50;left:65%;top:25%;color:#fff;}
.myCanvas{position:absolute;z-index:5;left:calc(50%);transform:translateX(-50%);bottom:-130px;animation:scale 12s ease infinite alternate var(--state);}
.msvg{position:absolute;left:52px;top:38px;width:180px;height:180px;cursor:pointer;z-index:2;animation:rot 8s linear infinite var(--state);}
.vid1{position:absolute;width:100%;height:100%;top:0%;left:0%;object-fit:cover;mask:radial-gradient(transparent 20%,red);-webkit-mask:radial-gradient(transparent 20%,red);mix-blend-mode:screen;pointer-events:none;z-index:2;}
.vid2{position:absolute;width:100%;height:100%;top:0%;left:-3%;object-fit:cover;mask:radial-gradient(red 0%,red 10%,transparent 15%,transparent);-webkit-mask:radial-gradient(red 0%,red 10%,transparent 15%,transparent);mix-blend-mode:screen;pointer-events:none;z-index:2;}
@keyframes rot{to{transform:rotate(1turn);}}
#wrapper{position:absolute;padding:0px;font-weight:200;font-size:3.2rem;font-family:"Long Cang","ZCOOL KuaiLe","KaiTi","Ma Shan Zheng","STKaiti","SimHei",cursive,serif;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);writing-mode:vertical-lr;white-space:pre;transform:translateX(-50%);text-align:center;width:60px;height:90%;left:90%;z-index:20;top:0;white-space:nowrap;}
.char{display:inline-block;padding:2px 0px;opacity:0;transform:translate(var(--x),var(--y)) rotate(-720deg);animation:fadeIn 1.5s var(--delay) forwards,flash 0.5s linear infinite;}
@keyframes fadeIn{100%{transform:translate(0,50%);opacity:1;}}
@keyframes flash{100%{filter:hue-rotate(360deg);}}
.stop .char{animation-play-state:paused;}
@keyframes scale{0%{transform:translateX(-50%) perspective(800px) rotateY(0deg) scale(0.01);}20%{transform:translateX(-50%) perspective(800px) rotateY(0deg) scale(1);}40%{transform:translateX(-50%) perspective(800px) rotateY(-25deg) scale(1.2);}60%{transform:translateX(-50%) perspective(800px) rotateY(25deg) scale(1.2);}80%{transform:translateX(-50%) perspective(800px) rotateY(0deg) scale(1);}100%{transform:translateX(-50%) perspective(800px) rotateY(0deg) scale(0.01);}}
</style>
</head>
<body>
<div id="papa">
<canvas class="myCanvas" width="800" height="400"></canvas>
<audio id="aud" src="https://i.uik.cc/view.php/2a87d4f126447c6d886b76b0e0df8838.mp3" preload="auto" autoplay loop></audio>
<video class="vid1" src="https://video-qn.51miz.com/preview/video/00/00/17/35/V-173563-D3AD8387.mp4" autoplay loop muted></video>
<video class="vid2" src="https://img2.tukuppt.com/video_show/2405811/00/73/37/608ca8165fa3d.mp4" autoplay loop muted></video>
<div id="player">
   <div class="petal p1"></div>
   <div class="petal p2"></div>
   <div class="petal p3"></div>
   <div class="petal p4"></div>
   <div class="petal p5"></div>
</div>
<div id="statusDisplay">播放中: -2:20</div>
<div id="testImg" >
   <div id="wrapper"></div>
</div>
<span id="fullscreen" title="">全屏欣赏</span>
<img class="msvg" src="https://638183.freep.cn/638183/web/svg/ccf.svg" alt="" />
</div>
<script>
(function(){
const papa = document.getElementById('papa');
const aud = document.getElementById('aud');
const player = document.getElementById('player');
const wrapper = document.getElementById('wrapper');
const msvg = document.querySelector('.msvg');
const vids = document.querySelectorAll('video');
const fullscreen = document.getElementById('fullscreen');
const canvas = document.querySelector('.myCanvas');
   const ctx = canvas.getContext('2d');
   ctx.save();
   ctx.font = 'bold 66px 华文隶书,Microsoft YaHei';
   ctx.strokeStyle = 'Gold';
   ctx.lineWidth = 1;
   ctx.textAlign = 'left';
   ctx.strokeText("岁月如笔写春秋", 130,200);
   ctx.restore();
const gc = `
岁月如笔写春秋
演唱：郭少杰
岁月如笔写春秋
一生知己最难求
相逢本是百年修
缘聚今生不可丢
时光似酒酿温柔
心事诉与明月收
若问情根深几许
朝朝暮暮共白头
我珍惜一路真心的相逢
感恩命运的温柔
愿余生常相伴不负这份宿命
我眷恋时光沉淀的安宁
憧憬偕老的约定
若有来世重逢再续未了情
岁月如笔写春秋
一生知己最难求
相逢本是百年修
缘聚今生不可丢
时光似酒酿温柔
心事诉与明月收
若问情根深几许
朝朝暮暮共白头
我珍惜一路真心的相逢
感恩命运的温柔
愿余生常相伴不负这份宿命
我眷恋时光沉淀的安宁
憧憬偕老的约定
若有来世重逢再续未了情
我珍惜一路真心的相逢
感恩命运的温柔
愿余生常相伴不负这份宿命
我眷恋时光沉淀的安宁
憧憬偕老的约定
若有来世重逢再续未了情
若有来世重逢再续未了情
`;
const gcAr = lrc2HC(gc);
let curkey = 0, isSeeking = false;

aud.ontimeupdate = () => {
if(curkey > gcAr.length - 1) return;
if(aud.currentTime >= gcAr) {
   const gap = (gcAr?. || 0) - gcAr;
   showLrc(gcAr, wrapper, gap);
}
const currentTime = aud.currentTime;
if(!aud.paused && aud.duration) renderPlayTime();
};
aud.onended = () => {
curkey = 0;
aud.play();
}
aud.onseeked = () => calcKey();
function lrc2HC(text) {
let lrcAr = [];
const ar = text.trim().split('\n');
ar.sort();
const reg = /\[(\d+)[.:](\d+)[.:](\d+)\](.*)/;
ar.forEach(item => {
   if(reg.test(item)) {
         let result = item.match(reg);
         const tmsg = parseInt(result) * 60 + parseInt(result) + parseInt(result) / 1000;
         lrcAr.push(.trim()]);
   }
});
return lrcAr.length ? lrcAr : [];
};
function calcKey() {
for (let j = 0; j < gcAr.length; j++) {
   if (aud.currentTime <= gcAr) {
         curkey = j - 1;
         break;
   }
}
if (curkey < 0) curkey = 0;
if (curkey > gcAr.length - 1) curkey = gcAr.length - 1;
const time = (gcAr?. || 0) - gcAr;
isSeeking = false;
showLrc(gcAr, wrapper, time);
}
function showLrc(str, targetElm, time) {
if(isSeeking) return;
targetElm.innerHTML = '';
const chars = str.split('').map(c => c === ' ' ? ' ' : c);
const frg = document.createDocumentFragment();
chars.forEach((char, idx) => {
   const span = document.createElement('span');
   span.innerHTML = char;
   span.classList.add('char');
   const x = Math.random() * (Math.random() > 0.5 ? -1000 : -1000);
   const y = Math.random() * (Math.random() > 0.5 ? 600: -600);
   span.style.cssText += `color:#${Math.random().toString(15).substring(2,8)};--x:${x}px;--y:${y}px;--delay:${Math.random()*0.5}s;`;
   frg.appendChild(span);
});
targetElm.appendChild(frg);
curkey ++;
setTimeout(() => isSeeking = false, time * 1000);
}
const statusDisplay = document.getElementById('statusDisplay');
function formatTime(seconds) {
const abs = Math.abs(seconds);
const m = Math.floor(abs/60);
const s = Math.floor(abs%60);
return `${seconds<0?'-':''}${m}:${s<10?'0':''}${s}`;
}
function renderPlayTime() {
   if(!aud.duration) return;
   const rem = aud.duration - aud.currentTime;
   statusDisplay.innerHTML = `<span style="color:#CC00FF">播放中：</span><span style="color:#FF0088">${formatTime(-rem)}</span>`;
}
['contextmenu', 'dragstart', 'selectstart'].forEach(type =>
papa.addEventListener(type, e => e.preventDefault())
);
document.addEventListener('visibilitychange', () => {
if (document.hidden) {
if (!aud.paused) aud.pause();
} else {
if (aud.paused && !aud.ended) aud.play().catch(()=>{});
}
});
player.onclick = () => {
aud.paused ? aud.play() : aud.pause();
};
msvg.onclick = () => player.click();
const updateState = () => {
papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
if(player) {
   msvg.title = player.title = aud.paused ? '播放' : '暂停';
   statusDisplay.innerHTML =aud.paused ?'已暂停' : `<span style="color:#CC00FF">播放中：</span><span style="color:#FF0088">${formatTime(-(aud.duration-aud.currentTime))}</span>`;
}
vids.forEach(vid => {
   if(aud.paused) vid.pause();
   else vid.play();
});
if(aud.paused) wrapper.classList.add('stop');
else wrapper.classList.remove('stop');
};
aud.onplaying = aud.onpause = () => updateState();
player.onanimationiteration = () => {
player.style.setProperty('filter', `hue-rotate(${30 + Math.random() * 180}deg)`);
};
let fs = true;let fsTimer;let labelTimer;
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);
});
document.body.addEventListener('click', ()=>{
if(aud.paused) aud.play();
}, {once:true})
})()
</script>
</body>
</html>

梦江南 发表于 2026-6-30 14:11

漂亮的小播，漂亮的歌词特效，精彩的视频制作。谢谢杨帆带来的好帖。{:4_187:}

红影发表于 2026-6-30 15:51

视频运用很奇妙，帖子场景十分开阔。
欣赏杨帆好帖{:4_199:}

半卷青衫 发表于 2026-6-30 15:57

好看的场景

梦油发表于 2026-6-30 16:58

字幕设计很活泼。

杨帆发表于 2026-6-30 18:01

梦江南发表于 2026-6-30 14:11
漂亮的小播，漂亮的歌词特效，精彩的视频制作。谢谢杨帆带来的好帖。

谢谢江南鼓励，祝夏安{:4_204:}

杨帆发表于 2026-6-30 18:01

红影发表于 2026-6-30 15:51
视频运用很奇妙，帖子场景十分开阔。
欣赏杨帆好帖

谢谢影子鼓励，祝夏安{:4_204:}

杨帆发表于 2026-6-30 18:02

半卷青衫发表于 2026-6-30 15:57
好看的场景

欢迎新朋友，谢谢鼓励，祝夏安{:4_190:}

杨帆发表于 2026-6-30 18:03

梦油发表于 2026-6-30 16:58
字幕设计很活泼。

谢谢梦兄鼓励，祝夏安{:4_190:}

偶然~ 发表于 2026-6-30 19:01

来欣赏杨帆老师的精品佳作！

偶然~ 发表于 2026-6-30 19:02

音画太棒了！

偶然~ 发表于 2026-6-30 19:02

视频唯美

偶然~ 发表于 2026-6-30 19:02

背景歌声动听

偶然~ 发表于 2026-6-30 19:02

制作大气磅礴

偶然~ 发表于 2026-6-30 19:02

音画合一，音乐与画面结合完美

偶然~ 发表于 2026-6-30 19:02

玫瑰花☆╮╮芍药花☆╮╰☆☆╮合欢花花～【*偶然献花给你啦】

偶然~ 发表于 2026-6-30 19:02

期待杨帆老师佳作频出！

偶然~ 发表于 2026-6-30 19:02

感谢杨帆老师带来的精彩，辛苦了！祝你开心幸福、阖家安康！

梦油发表于 2026-6-30 20:03

杨帆发表于 2026-6-30 18:03
谢谢梦兄鼓励，祝夏安

杨帆朋友别客气。

杨帆发表于 2026-6-30 20:23

偶然~ 发表于 2026-6-30 19:01
来欣赏杨帆老师的精品佳作！

问好偶然~，谢谢兄弟鼓励，祝夏安{:4_190:}

页: [1] 2

花潮论坛's Archiver

岁月如笔写春秋