就让岁月开成一朵花

杨帆发表于 2026-8-1 19:57

本帖最后由杨帆于 2026-8-2 12:17 编辑 <br /><br /><html lang="zh-CN">
<head>
<meta charset="UTF-8">
<link href="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" rel="stylesheet">
<title>就让岁月开成一朵花</title>
<style>
#papa { position: relative; display: grid; place-items: center; margin: 30px 0; width: 1280px; height: 750px; left: calc(50% - 81px); transform: translateX(-50%); box-shadow: 3px 3px 6px gray; overflow: hidden; user-select:none; z-index: 1; background: #000 url('https://wjl136.oss-cn-beijing.aliyuncs.com/26/za/268.jpg') no-repeat center/cover; font-family: "ZCOOL KuaiLe","Ma Shan Zheng","Long Cang","华文行楷","SimHei","Arial","sans-serif"; --state:running; }
#fish { width: 128px; height: 94px; position-anchor: right center; background: url('https://wj.zp68.com/lxx/yunhua/2025/05/08/33.png') no-repeat center/cover; position: absolute; z-index: 8; offset-path: ellipse(40% 40%); animation: move linear 18s infinite var(--state); }
@keyframes move { from { offset-distance: 100%; } to { offset-distance: 0%; } }
#nsvg{position: absolute;left:1%; top:7%; width:50%; height:50%;text-align:center;filter:drop-shadow(#000 0px 0 1px);animation:rott 10s linear infinite var(--state);z-index:10;}
@keyframes rott { to { transform: rotate(-360deg);} }
#msvg { width:50%; height:50%; position:absolute; left:1%; top:7%; z-index: 10; stroke-dashoffset: 0; animation: rotate 8s linear infinite var(--state),pMove 8s ease-in-out infinite alternate var(--state); }
@keyframes pMove { to { stroke-dashoffset: -180; } }
@keyframes rotate { to { transform: rotate(360deg); } }
.rot { position: absolute; animation: rot 6s linear infinite var(--state); cursor: pointer; }
.bl { position: absolute; width: 50px; transform: rotate(90deg); animation: offset-distance 2s forwards; }
#playBtnImg { position: absolute; left:65px;bottom: 65px; width: 80px; height: 80px; z-index: 10; }
#playBtnImg::after { content: ''; position: absolute; top: 50%; left: 50%; width: 15px; height: 15px; border-radius: 50%; background: Gold; transform: translate(-50%, -50%); z-index: 10; box-shadow: 2px 2px 8px Gold; }
@keyframes rot { from { transform: rotate(360deg); } to { transform: rotate(0deg); } }
@keyframes offset-distance { from { offset-distance: 0%; } to { offset-distance: 100%; } }
#fullscreen { position:absolute;left:25px;top:25px;color:DarkGray;font-size:25px;border:none;background:transparent;padding:4px 8px;border-radius:4px;z-index:18;cursor:pointer;opacity:0;transition:opacity 0.3s; }
#fullscreen:hover { font-style:italic; }
#wrapper { position: absolute; padding: 0px; font-weight:100;font-size:3.0em;font-family:"ZCOOL KuaiLe","Ma Shan Zheng","Long Cang","华文行楷","SimHei","Arial","sans-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: 93%;z-index: 20; top: 0;white-space: nowrap; }
.char { display: inline-block; padding: 4px 0px; opacity: 0; transform: translate(var(--x), var(--y))rotate(-360deg) ; animation: fadeIn 1.5s var(--delay) forwards,flash 0.5s linear infinite var(--state); }
@keyframes fadeIn {100% {transform: translate(0, 0);opacity: 1;}}
@keyframes flash {100% {filter: hue-rotate(360deg);}}
#bigstar { position:absolute;cursor: pointer; animation:scale 12s ease infinite alternate var(--state); }
@keyframes scale{0%{transform: perspective(800px) rotateY(0deg) scale(0.01);}20%{transform: perspective(800px) rotateY(0deg) scale(1);}40%{transform: perspective(800px) rotateY(-2deg) scale(1.2);}60%{transform: perspective(800px) rotateY(2deg) scale(1.2);}80%{transform: perspective(800px) rotateY(0deg) scale(1);}100%{transform: perspective(800px) rotateY(0deg) scale(0.01);}}
.vid { position: absolute; left: -10%; top: -10%;width: 120%; height: 120%; object-fit: cover; pointer-events: none; opacity: 0.88; mix-blend-mode: screen;clip-path:inset(0px 0px 60% 0px); z-index: 1; }
.intro { margin:0; width:100%; height:100%; position:absolute; background:url('https://wjl136.oss-cn-beijing.aliyuncs.com/26/za/268.jpg') no-repeat 50% 50%/100% 100%, linear-gradient(45deg, #e56420, #c22525, #3d9c31, #37bbde); background-size:cover; background-blend-mode:hard-light; animation:hue-rotate 10s linear infinite var(--state); z-index:1; }
@keyframes hue-rotate { 5% { transform:scale(1); opacity:1; } 20% { transform:scale(1); opacity:1; } 100% { transform:scale(8); opacity:0; } }
#statusDisplay { position:absolute;z-index:3;font-size:1.5em;font-weight:50;left:55%;top:15%;color:#8A2BE2; }
.mpic { position:absolute;z-index:3;width: 50px; offset-anchor: 100% 50%; animation: offset-distance 3s linear infinite alternate var(--state), rot 3s linear infinite var(--state); }
</style>
</head>
<body>
<div id="papa">
<div id="fish"></div>
<div id="playBtnImg" title="暂停"></div>
<div id="wrapper" ></div>
<div id="statusDisplay">加载中...</div>
<button id="fullscreen">全屏欣赏</button>
<div class='intro'></div>
<svg id="nsvg" viewBox="0 0 200 200">
<defs>
<path id="path1" d="M 180 100 A 80 80 0 0 1 20 100 A 80 80 0 0 1 180 100" fill="none"/>
</defs>
<use href="#path1" stroke-width="2" stroke="red" fill="none"/>
<text font-size="25" fill="#99CCFF" font-family="宋体,隶书,楷体">
<textPath id="myTPath" href="#path1" textLength="470">就让岁月开成一朵花</textPath>
</text>
</svg>
<svg id="msvg" viewBox="-200 -200 400 400">
<defs>
   <radialGradient id="grd" cx="55%" cy="45%" r="60%">
   <stop offset="0%" stop-color="#00FFFF"></stop>
   <stop offset="50%" stop-color="#6495ED"></stop>
   <stop offset="100%" stop-color="#7B68EE"></stop>
   </radialGradient>
   <linearGradient id="grdWave">
      <stop offset="0" stop-color="#009966"></stop>
      <stop offset="0.5" stop-color="#1976D2"></stop>
      <stop offset="1" stop-color="#CC3399"></stop>
   </linearGradient>
   <symbol id="star" viewBox="0 0 576 512">
   <path id="starPath" fill="url(#grd)"
   fill-rule="nonzero"
   d="M385.2 167.6c6.4 0 12.6.3 18.8 1.1C387.4 90.3 303.3 32 207.7 32 100.5 32 13 104.8 13 197.4c0 53.4 29.3 97.5 77.9 131.6l-19.3 58.6 68-34.1c24.4 4.8 43.8 9.7 68.2 9.7 6.2 0 12.1-.3 18.3-.8-4-12.9-6.2-26.6-6.2-40.8-.1-84.9 72.9-154 165.3-154zm-104.5-52.9c14.5 0 24.2 9.7 24.2 24.4 0 14.5-9.7 24.2-24.2 24.2-14.8 0-29.3-9.7-29.3-24.2.1-14.7 14.6-24.4 29.3-24.4zm-136.4 48.6c-14.5 0-29.3-9.7-29.3-24.2 0-14.8 14.8-24.4 29.3-24.4 14.8 0 24.4 9.7 24.4 24.4 0 14.6-9.6 24.2-24.4 24.2zM563 319.4c0-77.9-77.9-141.3-165.4-141.3-92.7 0-165.4 63.4-165.4 141.3S305 460.7 397.6 460.7c19.3 0 38.9-5.1 58.6-9.9l53.4 29.3-14.8-48.6C534 402.1 563 363.2 563 319.4zm-219.1-24.5c-9.7 0-19.3-9.7-19.3-19.6 0-9.7 9.7-19.3 19.3-19.3 14.8 0 24.4 9.7 24.4 19.3 0 10-9.7 19.6-24.4 19.6zm107.1 0c-9.7 0-19.3-9.7-19.3-19.6 0-9.7 9.7-19.3 19.3-19.3 14.5 0 24.4 9.7 24.4 19.3.1 10-9.9 19.6-24.4 19.6z"/></symbol>
      <clipPath id="pathClip">
<use href="#motionPath"/>
</clipPath>
</defs>
<foreignObject x="-200" y="-200" width="400" height="400" clip-path="url(#pathClip)">
   <video
   id="clipVideo"
   src="https://media-volc.jianpian.info/2769333/article/20240530/f8542970088c4206ae6f478762bb3cd5.mp4"
   autoplay muted loop playsinline
   style="object-fit:cover; width:100%; height:100%;"
   ></video>
</foreignObject>
<path id="motionPath" d="M180.00,0.00 160.00,0.00 155.35,38.29 174.77,43.08 159.38,83.65 141.67,74.36 119.76,106.10 134.73,119.36 102.25,148.14 90.89,131.68 56.74,149.60 63.83,168.30 21.70,178.69 19.29,158.83 -19.29,158.83 -21.70,178.69 -63.83,168.30 -56.74,149.60 -90.89,131.68 -102.25,148.14 -134.73,119.36 -119.76,106.10 -141.67,74.36 -159.38,83.65 -174.77,43.08 -155.35,38.29 -160.00,0.00 -180.00,0.00 -174.77,-43.08 -155.35,-38.29 -141.67,-74.36 -159.38,-83.65 -134.73,-119.36 -119.76,-106.10 -90.89,-131.68 -102.25,-148.14 -63.83,-168.30 -56.74,-149.60 -19.29,-158.83 -21.70,-178.69 21.70,-178.69 19.29,-158.83 56.74,-149.60 63.83,-168.30 102.25,-148.14 90.89,-131.68 119.76,-106.10 134.73,-119.36 159.38,-83.65 141.67,-74.36 155.35,-38.29 174.77,-43.08Z" fill="none" stroke="url(#grdWave)" stroke-dasharray="4 2" stroke-width="4"/>
<circle r="8" fill="#FFFF99">
<animateMotion id="animMotion" dur="20s" repeatCount="indefinite" rotate="auto" begin="indefinite">
   <mpath href="#motionPath"/>
</animateMotion>
</circle>
<g id="bigstar"><use href="#star" x="-60" y="-60" width="120" height="120"> <title id="svgTip">暂停</title></use></g>
</svg>
<video class ="vid" src="https://img2.tukuppt.com/video_show/15653652/01/59/07/63806a6eb7241_10s_big.mp4" autoplay loop preload="auto" playsinline muted></video>
<audio id="aud" src="https://i.uik.cc/view.php/74c65f4eb99798a1b8b9580a230e1adc.mp3" autoplay preload="auto" playsinline loop></audio>
</div>
<script>
const statusDisplay = document.getElementById('statusDisplay');
const papa = document.getElementById("papa");
const wrapper = document.getElementById('wrapper');
const audio = document.getElementById("aud");
function formatTime(seconds) {
if(isNaN(seconds)) return "0:00";
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}`;
}
const gc = `就让岁月开成一朵花
演唱：阿云朵
词曲制作：吴忧
放慢脚步听一听耳边的风
半生光阴轻的就像一场梦
不争不求也不问人海匆匆
只想贪恋此刻眼底的晴空
推开门窗迎一抹夕阳的红
就让喧嚣都留在烟雨之中
几分淡泊换来一路的从容
烟火人间且行且望且随风
就让岁月开成一朵花
人生啊又何处不芳华
任凭光阴流转
年轮又添笔画
爱在时光中轻轻发芽
就让岁月开成一朵花
等一场春风温柔抵达
带着知足上路
带着晚霞回家
爱在时光中轻轻发芽
推开门窗迎一抹夕阳的红
就让喧嚣都留在烟雨之中
几分淡泊换来一路的从容
烟火人间且行且望且随风
就让岁月开成一朵花
人生啊又何处不芳华
任凭光阴流转
年轮又添笔画
爱在时光中轻轻发芽
就让岁月开成一朵花
等一场春风温柔抵达
带着知足上路
带着晚霞回家
爱在时光中轻轻发芽
爱在时光中轻轻发芽
爱在时光中轻轻发芽`;
function lrc2HC(text) {
let lrcAr = [];
let ar = text.trim().split('\n');
let reg = /\[(\d+)[.:](\d+)[.:](\d+)\](.*)/;
ar.forEach(item => {
if(reg.test(item)) {
   let result = item.match(reg);
   let tmsg = parseInt(result) * 60 + parseInt(result) + parseInt(result) / 100;
   lrcAr.push(.trim()]);
}
});
lrcAr.sort((a,b)=>a-b);
return lrcAr;
};
const gcAr = lrc2HC(gc);
let curkey = -1;
let isSeeking = false;
let currentLyricText = "";

function findCurrentIndex(time) {
let idx = 0;
for(let i = 0; i < gcAr.length; i++) {
if(gcAr <= time) idx = i;
else break;
}
return idx;
}

audio.ontimeupdate = () => {
if(isSeeking || gcAr.length === 0) return;
const now = audio.currentTime;
const newIdx = findCurrentIndex(now);
if(newIdx !== curkey){
curkey = newIdx;
const lyricText = gcAr;
showLrc(lyricText, wrapper);
currentLyricText = lyricText;
}
if(!audio.paused && !isNaN(audio.duration)){
const remaining = audio.duration - now;
statusDisplay.innerHTML = `<span style="color:#CC00FF">播放中：</span><span style="color:#FF0088"> ${formatTime(-remaining)}</span>`;
}else{
statusDisplay.innerHTML = `<span style="color:#CC00FF">已暂停</span>`;
}
};

audio.onended = () => {
curkey = -1;
currentLyricText = "";
audio.currentTime = 0;
audio.play().catch(e=>console.log(e));
};

audio.onseeked = () => {
isSeeking = true;
setTimeout(()=>{
   calcKey();
   isSeeking=false;
},150);
};

function calcKey() {
curkey = findCurrentIndex(audio.currentTime);
if(gcAr){
   const lyricText = gcAr;
   showLrc(lyricText, wrapper);
   currentLyricText = lyricText;
}
}

function showLrc(str, targetElm) {
targetElm.innerHTML = '';
const chars = str.split('');
const frg = document.createDocumentFragment();
chars.forEach((char, idx) => {
const span = document.createElement('span');
span.textContent = char;
span.classList.add('char');
const x = (Math.random()-0.5)*20;
const y = (Math.random()-0.5)*20;
span.style.cssText += `
color: #${Math.floor(Math.random()*16777215).toString(16).padStart(6,'0')};
--x: ${x}px;
--y: ${y}px;
--delay: ${Math.random() * 0.5}s;
`;
frg.appendChild(span);
});
targetElm.appendChild(frg);
}

function tzRun1() {
   const frg = new DocumentFragment(), num = 5;
   for (let i = 0; i <= num; i ++) {
         const img = document.createElement('img');
         img.src = 'https://638183.freep.cn/638183/small/4yc.png';
         img.alt = '';
         img.className = 'mpic';
         img.style.filter = `hue-rotate(${Math.random() * 360}deg)`;
         img.style.offsetPath = `ray(${180 / num * i - 90}deg sides at 50% 95%)`;
         img.style.animationDuration = `${Math.random() * 8 + 8}s`;
         img.style.animationDelay = `${-10 * Math.random()}s`;
         frg.appendChild(img);
   }
   papa.appendChild(frg);
}
tzRun1();
const playBtnImg = document.getElementById("playBtnImg");
const svg = document.getElementById("msvg");
const clipVideo = document.getElementById("clipVideo");
const bigstar = document.getElementById('bigstar');
const fullscreen = document.getElementById('fullscreen');
const svgTip = document.getElementById("svgTip");
const vids = document.querySelectorAll('video');
let isPlaying = !audio.paused;

function togglePlayPause() {
if (isPlaying) {
audio.pause();
clipVideo.pause();
svg.pauseAnimations();
vids.forEach(vid => vid.pause());
} else {
audio.play().catch(e => console.log("音频播放限制：", e));
svg.unpauseAnimations();
clipVideo.play().catch(e => console.log("视频播放限制：", e));
vids.forEach(vid => vid.play().catch(()=>{}));
}
isPlaying = !isPlaying;
playBtnImg.title = isPlaying ? "暂停" : "播放";
svgTip.textContent = isPlaying ? "暂停" : "播放";
papa.style.setProperty('--state', audio.paused ? 'paused' : 'running');
}
bigstar.addEventListener('click', function(e) {
e.stopPropagation();
togglePlayPause();
});
playBtnImg.addEventListener('click', function(e) {
e.stopPropagation();
togglePlayPause();
});
let fs = true,fsTimer;
fullscreen.onclick = ()=>{
if(fs){
fullscreen.innerText = '退出全屏';
papa.requestFullscreen().catch(err=>console.log(err));
}else{
fullscreen.innerText = '全屏欣赏';
document.exitFullscreen().catch(err=>console.log(err));
}
fs = !fs;
};
papa.addEventListener('mousemove', () => {
clearTimeout(fsTimer);
fullscreen.style.opacity = '1';
fsTimer = setTimeout(() => fullscreen.style.opacity = '0', 2500);
});
msvg.onanimationiteration = () => playBtnImg.style.setProperty('filter', `hue-rotate(${30 + Math.random() * 180}deg)`);
function tzRun() {
const frg = new DocumentFragment(), num = 5;
for (let i = 0; i < num; i++) {
const img = document.createElement('img');
img.src = 'https://pic1.imgdb.cn/item/69c3e6b4aba521af10c8fa2a.png';
img.alt = '';
img.className = 'bl';
img.style.offsetPath = `ray(${360 / num * i}deg)`;
img.style.animationDelay = i + 1 + 's';
if (i === num - 1) img.onanimationend = () => playBtnImg.classList.add('rot');
frg.appendChild(img);
}
playBtnImg.appendChild(frg);
}
tzRun();
['contextmenu', 'dragstart','selectstart'].forEach(type =>
document.getElementById('papa').addEventListener(type, e => e.preventDefault())
);

document.addEventListener('visibilitychange', () => {
if (document.hidden) {
if (!audio.paused) audio.pause();
vids.forEach(v => v.pause());
} else {
if (audio.paused && !audio.ended) {
   audio.play().catch(()=>{});
   vids.forEach(v => v.play().catch(()=>{}));
}
}
});

function init() {
animMotion.beginElement();
calcKey();
audio.addEventListener('loadedmetadata',()=>{
calcKey();
})
}
document.addEventListener('DOMContentLoaded',()=>{
init();
})
</script>
</body>
</html>

红影发表于 2026-8-1 20:54

很漂亮的制作，两个播放器都能操作呢。
欣赏杨帆好帖{:4_199:}

偶然~ 发表于 2026-8-1 21:06

制作大气，欣赏啦，感谢杨帆老师带来的精彩~！

梦江南 发表于 2026-8-2 09:21

哇，速度好快，黑黑老师的小花路径就做出来了，还加了齿轮，杨帆真棒！{:4_187:}

杨帆发表于 2026-8-2 10:34

红影发表于 2026-8-1 20:54
很漂亮的制作，两个播放器都能操作呢。
欣赏杨帆好帖

问好影子，谢谢鼓励，祝开心{:4_204:}

杨帆发表于 2026-8-2 10:35

偶然~ 发表于 2026-8-1 21:06
制作大气，欣赏啦，感谢杨帆老师带来的精彩~！

问好偶然~，谢谢鼓励，祝开心{:4_190:}

杨帆发表于 2026-8-2 10:37

梦江南发表于 2026-8-2 09:21
哇，速度好快，黑黑老师的小花路径就做出来了，还加了齿轮，杨帆真棒！

鼓捣着玩呢，谢谢江南鼓励，祝开心{:4_204:}

红影发表于 2026-8-2 10:55

杨帆发表于 2026-8-2 10:34
问好影子，谢谢鼓励，祝开心

问好杨帆，不可以啊{:4_187:}

樵歌发表于 2026-8-2 11:13

独创的制作！

偶然~ 发表于 2026-8-2 11:40

杨帆发表于 2026-8-2 10:35
问好偶然~，谢谢鼓励，祝开心

愿你愿我，
以后每天，
都是平安。

杨帆发表于 2026-8-2 11:51

樵歌发表于 2026-8-2 11:13
独创的制作！

问好樵歌，鼓捣着玩呢，谢谢鼓励{:4_190:}

杨帆发表于 2026-8-2 11:52

偶然~ 发表于 2026-8-2 11:40
愿你愿我，
以后每天，
都是平安。

对，平安健康快乐天天{:4_190:}

偶然~ 发表于 2026-8-2 11:55

杨帆发表于 2026-8-2 11:52
对，平安健康快乐天天

人生缘分很奇妙，
再多金钱买不到。
相互珍惜这福报，
共同快乐最重要。

页: [1]

花潮论坛's Archiver

就让岁月开成一朵花