慢度春秋

杨帆发表于 2026-8-23 13:04

本帖最后由杨帆于 2026-8-24 11:36 编辑 <br /><br /><!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<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");
@import 'https://638183.freep.cn/638183/web/tz/tz.v5.css';
#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;z-index:1;--state:running;background:#000;}
.vid{position:absolute;top:-10%;left:-10%;width:120%;height:120%;object-fit:cover;mix-blend-mode:screen;opacity:0.8;z-index:1;pointer-events:none;}
#mutedbnt{position:absolute;z-index:25;width:100px;height:100px;bottom:5%;left:80%;cursor:pointer;object-fit:contain;}
.loop-img-container{position:absolute;width:100%;height:100%;z-index:0;animation:totalCycle 65s infinite linear;animation-play-state:var(--state);}
@keyframes totalCycle{0%,100%{transform:translate(0);}}
.loop-img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;opacity:0;mask:url("https://pic1.imgdb.cn/i/0347Idy38SXalwDqQlOS2r.png") no-repeat center/80% 80%;-webkit-mask:url("https://pic1.imgdb.cn/i/0347Idy38SXalwDqQlOS2r.png") no-repeat center/80% 80%;transition:opacity 0.4s ease;animation:16s infinite cubic-bezier(0.34,1.56,0.64,1);transform:translateZ(0);background-blend-mode:soft-light;backface-visibility:hidden;animation-play-state:var(--state);}
@keyframes img1Anim{0%{opacity:0;transform:rotateY(180deg) scale(0.8);}15%{opacity:1;transform:rotateY(0) scale(1);}75%{opacity:1;transform:rotateY(0) scale(1);}90%{opacity:0;transform:rotateY(-180deg) scale(0.8);}100%{opacity:0;}}
@keyframes img2Anim{0%{opacity:0;transform:scale(0.5);filter:saturate(0);}15%{opacity:1;transform:scale(1);filter:saturate(1.2);}25%{transform:scale(1.05);}35%{transform:scale(1);}75%{opacity:1;transform:scale(1);filter:saturate(1.2);}90%{opacity:0;transform:scale(0.5);filter:saturate(0);}100%{opacity:0;}}
@keyframes img3Anim{0%{opacity:0;clip-path:circle(0% at center);}15%{opacity:1;clip-path:circle(50% at center);}75%{opacity:1;clip-path:circle(50% at center);}90%{opacity:0;clip-path:circle(0% at center);}100%{opacity:0;}}
@keyframes img4Anim{0%{opacity:0;transform:translateX(-100%) skewX(-15deg);}10%{transform:translateX(-50%) skewX(10deg);}15%{opacity:1;transform:translateX(0) skewX(0);}75%{opacity:1;transform:translateX(0) skewX(0);}85%{transform:translateX(50%) skewX(-10deg);}90%{opacity:0;transform:translateX(100%) skewX(15deg);}100%{opacity:0;}}
@keyframes img5Anim{0%{opacity:0;filter:drop-shadow(0 0 20px rgba(255,255,255,0)) brightness(0);}5%{opacity:0.3;filter:drop-shadow(0 0 20px rgba(255,255,255,0.8)) brightness(1.5);}10%{opacity:0.7;filter:drop-shadow(0 0 10px rgba(255,255,255,0.5)) brightness(1.2);}15%{opacity:1;filter:drop-shadow(0 0 5px rgba(255,255,255,0.3)) brightness(1);}75%{opacity:1;filter:drop-shadow(0 0 5px rgba(255,255,255,0.3)) brightness(1);}85%{opacity:0.3;filter:drop-shadow(0 0 20px rgba(255,255,255,0.8)) brightness(1.5);}90%{opacity:0;filter:drop-shadow(0 0 20px rgba(255,255,255,0)) brightness(0);}100%{opacity:0;}}
.img1{animation-name:img1Anim;animation-delay:0s;}
.img2{animation-name:img2Anim;animation-delay:13s;}
.img3{animation-name:img3Anim;animation-delay:26s;}
.img4{animation-name:img4Anim;animation-delay:39s;}
.img5{animation-name:img5Anim;animation-delay:52s;}
#bgLayer{position:absolute;inset:0;z-index:-1;}
#intro{margin:0;z-index:1;width:100%;height:100%;position:absolute;background-color:#220080;background-size:cover;opacity:0.6;mix-blend-mode:soft-light;animation:hue-rotate 6s linear infinite var(--state);}
@keyframes hue-rotate{0%{filter:hue-rotate(-360deg);}100%{filter:hue-rotate(360deg);}}
</style>
</head>
<body>
<div id="papa">
<div id="bgLayer"></div>
<div id="intro"></div>
<video class ="vid" src="https://img2.tukuppt.com/video_show/13928806/00/41/16/600e82baca629.mp4" autoplay loop preload="auto" playsinline muted></video>
<video class ="vid" src="https://img2.tukuppt.com/video_show/2269348/00/17/44/5ec497a38f522.mp4" autoplay loop preload="auto" playsinline muted></video>
<img src="https://pic1.imgdb.cn/item/6a03cf00c05e72d91720910b.gif" id="mutedbnt" title="暂停" onClick="pc()"/>
<div class="loop-img-container">
         <img src="https://638183.freep.cn/638183/t23/3/lkp.jpg" loading="lazy" class="loop-img img1">
         <img src="https://p3-search.byteimg.com/obj/pgc-image/0662b692ee3f4ae4bad73ac1c3da2492.jpg" loading="lazy" class="loop-img img2">
         <img src="https://638183.freep.cn/638183/t24/7/h810.jpg" loading="lazy" class="loop-img img3">
         <img src="https://638183.freep.cn/638183/t23/3/008.jpg" loading="lazy" class="loop-img img4">
         <img src="https://p3-search.byteimg.com/obj/labis/1eb956fd56de8de45f9075719e6b1011.jpg" loading="lazy" class="loop-img img5">
   </div>
</div>
<script>
const gc = `慢度春秋
慢度春秋
词曲尚文歌集
风铃轻摇薄雾笼白昼
青石苔痕深浅各有缘由
有人策马扬鞭追朝日出走
有人树下闲烹岁月一壶酒
茶盏沉浮半生多少忧
泛黄信封藏尽未诉温柔
闹市霓虹细数满天星斗
篱院温火慢藏往事淡淡悠
莫追旁人辗转的春秋
浮生轨迹自有根由
尘缘看淡抛开心中愁
心安便是人间好时候
一路风光各有去留
放宽心事自在悠
莫追旁人辗转的春秋
浮生轨迹自有根由
尘缘看淡抛开心中愁
心安便是人间好时候
莫追旁人辗转的春秋
浮生轨迹自有根由
尘缘看淡抛开心中愁
心安便是人间好时候`;
function loadJs(url, callback) {
const script = document.createElement('script');
script.charset = 'utf-8';
script.src = url;
script.onload = function () {
   if (callback) callback();
};
document.head.appendChild(script);
}
loadJs('https://638183.freep.cn/638183/tzmaker/tz.v5.min.js', tzRun);
function tzRun() {
var tz = TZ('papa');
tz.add('audio', '', '', {src: 'https://www.joy127.com/url/157977.mp3'});
tz.bgprog().style('bottom: 40px; left: 80px;color: #00BFFF; width: 240px;z-index:10;');
tz.fs().style('left: 20px; top: 20px;z-index:10;');
tz.lrc(tz.lrc2HC(gc), '', true).style('letter-spacing: 6px;font:3.2em "Ma Shan Zheng","华文行楷","SimHei","Arial","sans-serif"; top: 5%; right:5%; z-index:10;writing-mode: vertical-rl; text-orientation: upright; --rect: 0 0 100% 0; --border: 0;');
setTimeout(()=>{
   audioEl = papa.querySelector('audio');
},120);
}
const papa = document.getElementById('papa');
const vids = document.querySelectorAll('video');
const pic = document.getElementById("mutedbnt");
const bg1 = '#000 url("https://pan.suyanw.cn/view.php/6e67b80f9419fb8f68ae36891de119dd.jpg") no-repeat center/cover';
const bg2 = '#000 url("https://ln2018.oss-cn-hangzhou.aliyuncs.com/2026/1/bj.png") no-repeat center/cover';
bgLayer.style.background = bg1;
let audioEl = null;
function pc(){
if (!audioEl) return;
if (!audioEl.paused) {
   audioEl.pause();pic.title="播放";vids.forEach(vid =>vid.pause());
   pic.src = "https://pic1.imgdb.cn/item/68e9c0c2c5157e1a886337ae.png";
   bgLayer.style.background = bg2;papa.style.setProperty('--state','paused');
} else {
   audioEl.play(); pic.title="暂停";vids.forEach(vid => vid.play());papa.style.setProperty('--state', 'running');
   pic.src = "https://pic1.imgdb.cn/item/6a03cf00c05e72d91720910b.gif";
   bgLayer.style.background = bg1;
}
}
window.pc = pc;
['contextmenu', 'dragstart','selectstart'].forEach(type =>
document.getElementById('papa').addEventListener(type, e => e.preventDefault())
);
</script>
</body>
</html>

梦油发表于 2026-8-23 14:11

欣赏杨帆精彩制作真是很好的享受。

梦江南 发表于 2026-8-23 15:35

这移动图片的效果真漂亮，歌曲好听，看这种帖子真是一种美美的享受！

梦江南 发表于 2026-8-23 15:37

谢谢杨帆精彩分享。不知咋的，表情包打不开了。

梦江南 发表于 2026-8-23 15:42

杨帆，别的帖子表情包能打开的。你自己试试。

红影发表于 2026-8-23 22:05

这制作效果非常漂亮，但代码里好像有问题，我这也是表情无法使用呢。

霜染枫丹 发表于 2026-8-23 22:15

扬帆晚上好~~

很有技术含量的好帖，我很喜欢这首歌。画面很有力量感，赞佩！{:4_204:}{:4_190:}

霜染枫丹 发表于 2026-8-23 22:16

梦江南发表于 2026-8-23 15:37
谢谢杨帆精彩分享。不知咋的，表情包打不开了。

我能顺利打开，可能是浏览器不一样吧。{:4_204:}{:4_190:}

杨帆发表于 2026-8-23 22:44

梦油发表于 2026-8-23 14:11
欣赏杨帆精彩制作真是很好的享受。

谢谢梦兄鼓励，祝开心

杨帆发表于 2026-8-23 22:45

梦江南发表于 2026-8-23 15:35
这移动图片的效果真漂亮，歌曲好听，看这种帖子真是一种美美的享受！

谢谢江南鼓励，祝开心

杨帆发表于 2026-8-23 22:48

梦江南发表于 2026-8-23 15:37
谢谢杨帆精彩分享。不知咋的，表情包打不开了。

是，我刚发现，其因不明

杨帆发表于 2026-8-23 22:49

本帖最后由杨帆于 2026-8-24 11:40 编辑

红影发表于 2026-8-23 22:05
这制作效果非常漂亮，但代码里好像有问题，我这也是表情无法使用呢。
正常了，是代码冲突问题，已修复，谢谢影子{:4_204:}

杨帆发表于 2026-8-23 22:56

霜染枫丹发表于 2026-8-23 22:15
扬帆晚上好~~

很有技术含量的好帖，我很喜欢这首歌。画面很有力量感，赞佩！

这首歌您发过，我只是鼓捣着试玩一次，还谈不上技术含量，谢谢枫丹老师喜欢与鼓励

杨帆发表于 2026-8-23 23:01

本帖最后由杨帆于 2026-8-23 23:29 编辑

霜染枫丹发表于 2026-8-23 22:16
我能顺利打开，可能是浏览器不一样吧。
也许与浏览器有关。我这在编辑模式下正常，谢谢枫丹老师{:4_204:}

杨帆发表于 2026-8-23 23:24

本帖最后由杨帆于 2026-8-23 23:27 编辑

梦江南发表于 2026-8-23 15:42
杨帆，别的帖子表情包能打开的。你自己试试。
是的，此贴在高级模式或编辑模式下表情包才正常{:4_187:}

梦江南 发表于 2026-8-24 09:12

霜染枫丹发表于 2026-8-23 22:16
我能顺利打开，可能是浏览器不一样吧。

回版主，在小回框里仍然打不开，到高级回复栏里能打开了。{:4_204:}

小九发表于 2026-8-24 10:04

非常精彩的制作！很美！欣赏了！

梦油发表于 2026-8-24 10:52

杨帆发表于 2026-8-23 22:44
谢谢梦兄鼓励，祝开心

杨帆朋友别客气。

杨帆发表于 2026-8-24 11:30

小九发表于 2026-8-24 10:04
非常精彩的制作！很美！欣赏了！

问好小九，谢谢鼓励，祝开心快乐{:4_204:}

杨帆发表于 2026-8-24 11:40

梦江南发表于 2026-8-24 09:12
回版主，在小回框里仍然打不开，到高级回复栏里能打开了。

是代码冲突问题，已修复，谢谢江南{:4_187:}

页: [1] 2

花潮论坛's Archiver

慢度春秋