博大情怀

杨帆发表于 2026-7-23 11:21

本帖最后由杨帆于 2026-7-25 07:50 编辑 <br /><br /><!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css2?family=Liu+Jian+Mao+Cao&family=Zhi+Mang+Xing&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; left:calc(50% - 81px);transform:translateX(-50%);width:1280px;height:750px;box-shadow:3px 3px 6px gray;overflow:hidden;z-index:1;--state:running;font-family:"ZCOOL KuaiLe","Ma Shan Zheng","Long Cang","华文行楷",SimHei,Arial,sans-serif;background:#000 url('https://www.helloimg.com/i/2026/07/09/6a4f5c726e557.jpg') no-repeat 50% 25%/cover;}
.vid1,.vid2{position:absolute;z-index:3;pointer-events:none;object-fit:cover;object-position:center;mix-blend-mode:screen;will-change:transform;}
.vid1{left:-10%;top:-10%;width:120%;height:120%;mask:linear-gradient(to bottom,red 50%,transparent 68%);-webkit-mask:linear-gradient(to bottom,red 50%,transparent 68%);}
.vid2{left:15%;top:60%;width:25%;height:25%;mask:linear-gradient(to right top,red 0%,red 80%,transparent 90%);-webkit-mask:linear-gradient(to right top,red 0%,red 80%,transparent 90%);}
.song-info-vertical{position:absolute;width:800px;height:600px;writing-mode:vertical-rl;text-orientation:mixed;font-weight:bold;font-family:'Zhi Mang Xing','ZCOOL KuaiLe','Ma Shan Zheng','Long Cang','华文琥珀',PingFang SC,'Segoe UI',cursive;letter-spacing:6px;z-index:30;pointer-events:none;filter:drop-shadow(0 0 8px rgba(255,200,0,0.7));white-space:nowrap;color:transparent;overflow:visible !important;}
.song-info-vertical.title{right:8%;top:5%;font-size:3.2rem;height:700px;}
.song-info-vertical.artist{right:93%;top:5%;font-size:3.2rem;height:700px;}
.song-info-vertical::before{position:absolute;content:attr(data-text);inset:0 -30px;min-width:100%;height:0%;background:linear-gradient(to bottom,#FFBF00,#FF7F00,#FFD966);background-clip:text;-webkit-background-clip:text;color:#FFD966;overflow:hidden;white-space:nowrap;filter:drop-shadow(0 0 5px #ffaa44);animation:textFillVertical 5.2s infinite alternate ease-in-out;text-shadow:-1px -1px 0 #f00,1px -1px 0 #f00,-1px 1px 0 #f00,1px 1px 0 #f00,0 0 4px rgba(255,68,0,0.5);writing-mode:vertical-rl;text-orientation:mixed;}
.song-info-vertical.pause-animation::before{animation-play-state:paused;}
@keyframes textFillVertical{0%{height:0%;letter-spacing:8px;opacity:0.7;}40%{letter-spacing:2px;}100%{height:100%;letter-spacing:1px;opacity:1;}}
#fullscreen{position:absolute;right:25px;bottom: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;}
#playBtn{position:absolute;left:calc(50% - 50px);top:82%;width:120px;height:120px;border-radius:50%;background:transparent;border:0 solid rgba(0,255,127,0.2);cursor:pointer;display:flex;align-items:center;justify-content:center;overflow:hidden;z-index:88;animation:circle 5s linear infinite;}
.stop#playBtn{animation-play-state:paused;}
.star-rotate-wrapper{width:100%;height:100%;display:flex;align-items:center;justify-content:center;}
.star-rotate-wrapper.spinning{animation:spinContainer 8s linear infinite;}
.star-rotate-wrapper.paused{animation-play-state:paused;}
@keyframes spinContainer{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}
#starCanvas{width:70px;height:70px;display:block;background:transparent;}
@keyframes circle{to{transform:rotate(360deg);}}
.msvg{animation:scale 12s ease infinite alternate var(--state);}
@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(-2deg) scale(1.2);}60%{transform:translateX(-50%) perspective(800px) rotateY(2deg) 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">
<button id="fullscreen">全屏欣赏</button>
<div class="song-info-vertical title" data-text="宠辱不惊，看庭前花开花落">宠辱不惊，看庭前花开花落</div>
<div class="song-info-vertical artist" data-text="去留无意，望天上云卷云舒">去留无意，望天上云卷云舒</div>
<svg class="msvg" width="550" height="275" viewBox="0 0 400 200" xmlns="http://www.w3.org/2000/svg" style="position:absolute;left:50%;top:60%;transform:translateX(-50%);z-index:10;">
   <defs>
         <path id="path1" d="M20 180 Q200 20 380 180" fill="none" stroke="red" />
         <radialGradient id="radial" cx="0.5" cy="0.5" r="0.5">
            <stop offset="0%" stop-color="DeepPink"/>
            <stop offset="80%" stop-color="Orange"/>
            <stop offset="100%" stop-color="gold"/>
         </radialGradient>
   </defs>
   <text fill="url(#radial)" style="font:bold 30px 'Ma Shan Zheng','华文隶书',sans-serif">
         <textPath id="myTPath" href="#path1" lengthAdjust="spacingAndGlyphs">博大情怀</textPath>
   </text>
</svg>
<div id="playBtn" title="播放/暂停">
   <div class="star-rotate-wrapper" id="starRotateWrapper">
         <canvas id="starCanvas" width="70" height="70"></canvas>
   </div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=3408208760.mp3" autoplay loop></audio>
<video class="vid1" src="https://img2.tukuppt.com/video_show/15653652/00/80/83/60d04564c32f7.mp4" loop preload="auto" playsinline autoplay muted></video>
<video class="vid2" src="https://www.llz123.net/llz/llz/mulu/tongnian/yu.mp4" loop preload="auto" playsinline muted></video>
<button id="togglePlayBtn" style="display:none"></button>
</div>
<script>
const q = sel => document.querySelector(sel);
const titleEl = q('.song-info-vertical.title');
const artistEl = q('.song-info-vertical.artist');
const vids = document.querySelectorAll('video');
const aud = q('#aud');
const playBtn = q('#playBtn');
const starRotateWrapper = q('#starRotateWrapper');
const fullscreenBtn = q('#fullscreen');
const path1 = q('#path1');
const myTPath = q('#myTPath');
const togglePlayBtn = q('#togglePlayBtn');
const papa = q('#papa');
const msvg = document.querySelector(".msvg");
let globalIsPlaying = false;
let fsTimer = null;
let flowerAnimId = null;
let flowerPauseTimer = null;
let isFlowerDrawing = false;
const starCanvas = q('#starCanvas');
const starCtx = starCanvas.getContext('2d');
const starSize = 70;
myTPath.setAttribute('textLength', path1.getTotalLength());
function globalTogglePlay() {
globalIsPlaying = !globalIsPlaying;
if (globalIsPlaying) {
   titleEl.classList.remove('pause-animation');
   artistEl.classList.remove('pause-animation');
   aud.play().catch(err => console.log('音频播放限制：', err));
   vids.forEach(vid => vid.play());
   playBtn.classList.remove('stop');
   starRotateWrapper.classList.replace('paused', 'spinning');
   startFlowerDrawAnimation();
} else {
   titleEl.classList.add('pause-animation');
   artistEl.classList.add('pause-animation');
   aud.pause();
   vids.forEach(vid => vid.pause());
   playBtn.classList.add('stop');
   starRotateWrapper.classList.replace('spinning', 'paused');
   stopFlowerDrawAnimation();
}
papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
}
function startFlowerDrawAnimation() {
if (isFlowerDrawing) return;
isFlowerDrawing = true;
let progress = 0;
const duration = 3500;
const startTime = performance.now();
function step(time) {
   progress = Math.min(1, (time - startTime) / duration);
   drawFlower(starCtx, progress);
   if (progress < 1) {
         flowerAnimId = requestAnimationFrame(step);
   } else {
         isFlowerDrawing = false;
         flowerAnimId = null;
         drawFlower(starCtx, 1);
         flowerPauseTimer = setTimeout(() => {
            if (globalIsPlaying) startFlowerDrawAnimation();
         }, 1500);
   }
}
flowerAnimId = requestAnimationFrame(step);
}
function stopFlowerDrawAnimation() {
if (flowerAnimId) cancelAnimationFrame(flowerAnimId);
if (flowerPauseTimer) clearTimeout(flowerPauseTimer);
flowerAnimId = null;
flowerPauseTimer = null;
isFlowerDrawing = false;
}
function getFlowerPoints(cx, cy, outerR, innerR, petals) {
const pts = [];
const step = (2 * Math.PI) / (petals * 2);
for (let i = 0; i < petals * 2; i++) {
   const r = i % 2 === 0 ? outerR : innerR;
   const a = -Math.PI / 2 + i * step + (i % 2) * 0.08;
   pts.push({ x: cx + r * Math.cos(a), y: cy + r * Math.sin(a) });
}
return pts;
}
function drawFlower(ctx, progress) {
const cx = starSize / 2, cy = starSize / 2, outerR = 32, innerR = 14, petals = 12;
const pts = getFlowerPoints(cx, cy, outerR, innerR, petals);
ctx.clearRect(0, 0, starSize, starSize);
const totalSteps = pts.length * 2;
const currentStep = Math.min(totalSteps, Math.floor(progress * totalSteps));
ctx.save();
ctx.shadowColor = 'rgba(255, 200, 100, 0.2)';
ctx.shadowBlur = 12;
ctx.strokeStyle = 'silver';
ctx.lineWidth = 2.8;
ctx.lineJoin = ctx.lineCap = 'round';
ctx.beginPath();
let drawnPoints = 0;
for (; drawnPoints < pts.length; drawnPoints++) {
   if (drawnPoints * 2 >= currentStep) break;
   drawnPoints === 0 ? ctx.moveTo(pts.x, pts.y) : ctx.lineTo(pts.x, pts.y);
}
if (drawnPoints < pts.length - 1 && currentStep > drawnPoints * 2) {
   const prev = pts;
   const next = pts;
   const ratio = (currentStep - drawnPoints * 2) / 2;
   ctx.lineTo(prev.x + (next.x - prev.x) * ratio, prev.y + (next.y - prev.y) * ratio);
}
ctx.stroke();
ctx.restore();
const fillProgress = Math.max(0, (progress - 0.5) * 1.8);
if (fillProgress > 0) {
   ctx.save();
   ctx.shadowColor = 'rgba(255, 200, 100, 0.08)';
   ctx.shadowBlur = 10;
   const grad = ctx.createRadialGradient(cx, cy, 0, cx, cy, outerR);
   grad.addColorStop(0, '#ffd700');
   grad.addColorStop(0.3, '#ffcc33');
   grad.addColorStop(0.6, '#ffb800');
   grad.addColorStop(0.85, '#ff9900');
   grad.addColorStop(1, '#ff7700');
   ctx.fillStyle = grad;
   ctx.globalAlpha = fillProgress * 0.85 + 0.1;
   ctx.beginPath();
   ctx.moveTo(pts.x, pts.y);
   pts.forEach(p => ctx.lineTo(p.x, p.y));
   ctx.closePath();
   ctx.fill();
   ctx.restore();
}
if (progress > 0.6) {
   const glowProgress = Math.min(1, (progress - 0.6) * 2.5);
   ctx.save();
   ctx.globalAlpha = glowProgress * 0.3;
   const grad = ctx.createRadialGradient(cx, cy, 0, cx, cy, 12);
   grad.addColorStop(0, 'rgba(255, 255, 200, 0.6)');
   grad.addColorStop(1, 'rgba(255, 215, 0, 0)');
   ctx.fillStyle = grad;
   ctx.beginPath();
   ctx.arc(cx, cy, 12, 0, Math.PI * 2);
   ctx.fill();
   ctx.restore();
}
}
playBtn.addEventListener('click', globalTogglePlay);
togglePlayBtn.addEventListener('click', globalTogglePlay);
fullscreenBtn.onclick = async () => {
try {
   if (!document.fullscreenElement) {
         await papa.requestFullscreen();
         fullscreenBtn.textContent = '退出全屏';
   } else {
         await document.exitFullscreen();
         fullscreenBtn.textContent = '全屏欣赏';
   }
} catch (e) {
   console.log('全屏切换失败：', e);
}
};
papa.addEventListener('mousemove', () => {
clearTimeout(fsTimer);
fullscreenBtn.style.opacity = '1';
fsTimer = setTimeout(() => fullscreenBtn.style.opacity = '0', 2500);
});
document.addEventListener('visibilitychange', () => {
if (document.hidden) {
   if (globalIsPlaying) globalTogglePlay();
} else {
   if (!globalIsPlaying) globalTogglePlay();
}
});
['contextmenu', 'dragstart', 'selectstart'].forEach(ev => {
papa.addEventListener(ev, e => e.preventDefault());
});
drawFlower(starCtx, 0);
globalTogglePlay();
</script>
</body>
</html>

梦江南 发表于 2026-7-23 11:33

好有意境的画面！这文字特效很赞，音乐配得赞，欣赏杨帆好帖。{:4_187:}

红影发表于 2026-7-23 13:38

“宠辱不惊，看庭前花开花落；去留无意，望天上云卷云舒”，一份淡泊豁达的人生态度。
这制作真漂亮，欣赏杨帆好帖{:4_199:}

杨帆发表于 2026-7-23 20:29

梦江南发表于 2026-7-23 11:33
好有意境的画面！这文字特效很赞，音乐配得赞，欣赏杨帆好帖。

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

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

红影发表于 2026-7-23 13:38
“宠辱不惊，看庭前花开花落；去留无意，望天上云卷云舒”，一份淡泊豁达的人生态度。
这制作真漂亮，欣赏 ...

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

红影发表于 2026-7-23 23:22

杨帆发表于 2026-7-23 20:30
谢谢影子鼓励，祝夏安

问好杨帆，晚上好{:4_187:}

霜染枫丹 发表于 2026-7-23 23:52

欣赏扬帆好帖，很精致的制作，歌曲好听。谢分享，祝安康！{:4_204:}{:4_190:}

杨帆发表于 2026-7-24 12:51

霜染枫丹发表于 2026-7-23 23:52
欣赏扬帆好帖，很精致的制作，歌曲好听。谢分享，祝安康！

谢谢枫丹老师雅评与鼓励，祝夏安{:4_187:}

小辣椒 发表于 2026-7-24 22:58

杨帆这个帖有新意，但个人建议那个蓝星的视频可以去了，2个视频够了，还有对联文字颜色配的和背景不够协调，我打开很慢，你代码有报错，但整体构思不错。

杨帆发表于 2026-7-25 07:45

小辣椒发表于 2026-7-24 22:58
杨帆这个帖有新意，但个人建议那个蓝星的视频可以去了，2个视频够了，还有对联文字颜色配的和背景不够协调 ...

有道理，谢谢小辣椒的建设性建议{:4_187:}

页: [1]

花潮论坛's Archiver

博大情怀