人是 - 动画音画 - 花潮论坛 - Powered by Discuz! Archiver

杨帆发表于 2026-8-15 07:08

人是

本帖最后由杨帆于 2026-8-16 14:32 编辑 <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;margin:30px 0;left:calc(50% - 81px);transform:translateX(-50%);aspect-ratio:16/9;width:clamp(600px,90vw,1400px);min-height:338px;background:url('https://bayimg.com/49690c5dec662f3800fe484eb0f2c75ae1897191.jpg') no-repeat center/cover;box-shadow:2px 2px 6px #000;z-index:1;user-select:none;overflow:hidden;--state:running;--deg:1turn;color:#FFCC00;}
.mpic{position:absolute;width:50px;offset-anchor:100% 50%;animation:offset-distance 3s linear infinite alternate,rot 3s linear infinite;animation-play-state:var(--state);}
@keyframes offset-distance{from{offset-distance:0%;}to{offset-distance:100%;}}
@keyframes rot{from{transform:rotate(360deg);}to{transform:rotate(0deg);}}
#p1{fill:none;stroke:currentColor;stroke-dashoffset:100%;animation:move linear 20s infinite var(--state);}
@keyframes move{to{stroke-dashoffset:0%;}}
.robot{position:absolute;z-index:2;animation:robotWalk 12s infinite alternate ease-in-out var(--state);}
@keyframes robotWalk{0%{transform:translateY(0) rotate(0deg);}25%{transform:translateY(15px) rotate(3deg);}50%{transform:translateY(0) rotate(0deg);}75%{transform:translateY(-15px) rotate(-3deg);}100%{transform:translateY(0) rotate(0deg);}}
.player{position:absolute;left:52px;top:38px;width:120px;height:120px;cursor:pointer;z-index:18;animation:rot 8s linear infinite var(--state);}
.player:hover{scale:1.05;}
@keyframes rot{to{transform:rotate(1turn);}}
#msvg{position:absolute;left:40%;top:12%;width:20vw;height:10vw;opacity:0.7;z-index:2;}
#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%;}}
#intro{margin:0px 0px;z-index:3;width:100%;height:100%;position:absolute;background:#220080;background-size:cover;opacity:1;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);}}
#lrc{--motion:cover2;--tt:2s;position:absolute;left:0%;top:85%;font:normal bold 48px/1.2 'Long Cang','Zhi Mang Xing','ZCOOL KuaiLe','Ma Shan Zheng','华文琥珀',PingFang SC,'Segoe UI',cursive;color:transparent;z-index:21;width:100%;height:10%;text-align:center;white-space:pre;transform:translateX(0%);filter:drop-shadow(#FFFFFF 1px 0 0) drop-shadow(#FFFFFF 0 1px 0) drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px 0);}
#lrc::before{position:absolute;content:attr(data-lrc);animation:var(--motion) var(--tt) linear forwards var(--state);animation-play-state:var(--state);}
@keyframes cover2{0%{opacity:1;transform:scale(0);color:#ff0000;}50%{opacity:1;color:#000078;transform:scale(1);}70%{opacity:1;color:#880000;transform:scale(1);}100%{opacity:1;transform:scale(1);color:#00aa00;}}
.vid1{position:absolute;z-index:-1;width:500px;height:500px;}
.vid2{position:absolute;z-index:-1;pointer-events:none;object-fit:cover;object-position:center;mix-blend-mode:screen;will-change:transform;left:-10%;top:-10%;width:120%;height:120%;mask:linear-gradient(to top,red 25%,transparent 58%);-webkit-mask:linear-gradient(to top,red 25%,transparent 58%);}
#fullscreen{position:absolute;right: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;}
#statusDisplay{position:absolute;z-index:3;font-size:1.5em;font-weight:50;left:25%;top:15%;color:#8A2BE2;}
#papa:fullscreen #msvg{position:absolute;left:33%;top:24%;width:40vw;height:10vw;opacity:0.7;z-index:2;}
</style>
</head>
<body>
<div id="papa">
<div id="intro"></div>
<div id="fish"></div>
<button id="fullscreen">全屏欣赏</button>
<div id="statusDisplay">加载中...</div>
<video class="vid1" src="https://i.uik.cc/view.php/f1c7412c56a71b9f0e74093634e4a9cc.mp4" style="mask: radial-gradient(ellipse 50% 30% at 50% 50%, black 30%,transparent 60%);-webkit-mask: radial-gradient(ellipse 50% 30% at 50% 50%, black 30%,transparent 60%); cursor:pointer;" loop preload="auto" playsinline autoplay muted></video>
<video class="vid2" src="https://img2.tukuppt.com/video_show/2475824/00/01/52/5b44f4d7298d6.mp4" loop preload="auto" playsinline autoplay muted></video>
<div id="lrc" data-lrc=""></div>
<css-doodle grid="20">
:doodle {@size:100% 100%;margin:0;}
@grid: 50x1 / 100% 100%;
:container {perspective: 10vmin;}
pointer-events: auto;background: @m(@r(30, 30),radial-gradient( @p(#ff0000,#00ff00,#fff000,#ffffff) 6%, transparent 20% ) @r(100%) @r(100%) / @r(1%, 3%) @lr no-repeat);@size: 30%;@place-cell: center;border-radius: 50%;transform-style: preserve-3d;animation: scale-up 15s linear infinite var(--state);animation-delay: calc(@i * -.6s);
@keyframes scale-up {0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(0); }10% { opacity: 1; }95% { transform: translate3d(0, 0, @r(50vmin, 55vmin)) rotate(@r(-360deg, 360deg)); }100% { opacity: 0; transform: translate3d(0, 0, 1vmin); }}
</css-doodle>
<img class="robot" src="https://xlaj.cn/upfile/2026/07/31/hd.png" alt="" style="left:45%; top:48%; width: 150px; height: 257px;">
<svg id="msvg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 200">
   <path id="p1" d="M0 100 H400" fill="none" stroke="currentColor" stroke-width="2" stroke-dasharray="2" />
</svg>
<audio id="aud" src="https://i.uik.cc/view.php/6ed2a33bf0acdddc6e8a22317985bc4f.mp3" loop preload="auto" autoplay playsinline></audio>
<img class="player" src="https://s41.ax1x.com/2026/08/15/pmX97xU.png" title="暂停" alt="" />
</div>
<script>
(function() {
let mKey = 0, mFlag = true;
let lrcTime = (ar) => {
let tmpAr = [];
for(let j = 0; j < ar.length - 1; j ++) {
if(j !== ar.length - 1) tmpAr = parseFloat((ar - ar).toFixed(1));
}
let aver = parseInt(tmpAr.reduce((a,b) => a + b, 0) / (tmpAr.length - 1)) + averAdd;
tmpAr.push(aver);
tmpAr.forEach((item,key) => {
ar = item > aver ? aver : item;
});
return ar;
};
let averAdd = 0, offset = 0;
let getLrcAr = (text) => {
let lrcAr = [];
let calcRule = ;
for(let x of text.split('\n')) {
let ar = [];
let re = /\d+[\.:]\d+([\.:]\d+)?/g;
let geci = x.replace(re,'');
if(geci) {
geci = geci.replace(/[\[\]\'\"\t,]s?/g,'');
let time = x.match(re);
if(time != null) {
for(let y of time) {
let tmp = y.match(/\d+/g);
let sec = 0;
for(let z in tmp) sec += tmp * calcRule;
ar = ;
lrcAr.push(ar);
}
}
}
}
lrcAr.sort((a,b)=> a - b);
return(lrcTime(lrcAr));
};
let geci = `00:00.00]人是_ (《流浪地球2》电影定义主题曲) - 周深
词：唐恬@勇士音乐
曲：钱雷@勇士音乐
编曲：钱雷@勇士音乐
制作人：钱雷@勇士音乐
配唱制作：钱雷@勇士音乐
主唱录音/编辑：徐威@52Hz Studio
主唱录音棚：55Tec Beijing
弦乐编写：胡静成
弦乐：国际首席爱乐乐团
中提琴：毕芳
弦乐录音：王小四@金田录音棚
混音/母带：姚海毅@勇士音乐
统筹执行：王山山@勇士音乐
词曲版权管理方：索尼音乐版权代理（北京）有限公司
特别鸣谢：周深工作室
监制：高航/大晶
音乐统筹及营销：奔跑怪物
去往所有命运风暴之中的盲童
你来自火山炙热与苦寒的深海
生本就是意外硬币反选为尘埃
为侥幸可以相爱造了船移着山
出征是古老的宿命
人将赤足踏入夜晚
只有我可以来决定我以何种姿态
让死亡觊觎我
让恐惧亲吻我
来摧毁我深爱的一切
可仍夺不走我的选择
弹指间湮灭我
但命运打不败活着
让生命如剧烈的烟火
璀璨熄灭前也将点亮
孩童的双眸
未知摊开棋局舍弃昨日才可破
再见了我的月光我的蓝我的爱
钢铁的巨兽在轰鸣我们拒绝走入夜晚
破碎是新生的约定我便愿为尘埃
让死亡觊觎我
让恐惧亲吻我
来摧毁我深爱的一切
可仍夺不走我的选择
弹指间湮灭我
但命运打不败活着
让生命如剧烈的烟火
璀璨熄灭前也将点亮
孩童的双眸
若巨浪已淹没了来路我是帆亦是舟
是微渺的希望
我们依然前行没有光指引
往前吧失去吧不要停留
让时空消亡我
你无需记得我
来摧毁我深爱的一切
可仍夺不走我的选择
弹指间湮灭我
但命运打不败活着
是微茫中高歌的族类
生命像烟火那就点亮
孩童的双眸
未来的瞳孔
`;
let lrcAr = getLrcAr(geci);
let showLrc = (time) => {
let name = 'cover2';
lrc.innerHTML = lrcAr;
lrc.dataset.lrc = lrcAr.replace(/<br>/, '\n');
lrc.style.setProperty('--motion', name);
lrc.style.setProperty('--tt', time + 's');
papa.style.setProperty('--state', 'running');
mKey += 1;
mFlag = !mFlag;
};
let calcKey = () => {
for (let j = 0; j < lrcAr.length; j++) {
if (aud.currentTime <= lrcAr) {
mKey = j - 1;
break;
}
}
if (mKey < 0) mKey = 0;
if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;
let time = lrcAr - (aud.currentTime - lrcAr);
showLrc(time);
};

aud.addEventListener('seeked', () => calcKey());
aud.addEventListener('timeupdate', () => {
for (let j = 0; j < lrcAr.length; j++) {
if (aud.currentTime >= lrcAr) {
if (mKey === j) showLrc(lrcAr);
}
}
});

})();
</script><script>
const papa = document.getElementById('papa');
const aud = document.getElementById('aud');
const player = document.querySelector('.player');
const msvg = document.querySelector('#msvg');
const vids = document.querySelectorAll('video');
const statusDisplay = document.getElementById('statusDisplay');
const fullscreen = document.getElementById('fullscreen');
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}`;
}
let script = document.createElement('script');
script.src = 'https://unpkg.com/css-doodle@0.34.9/css-doodle.min.js';
document.head.appendChild(script);
aud.addEventListener('timeupdate',()=>{
      if(aud.paused) return;
      const current = aud.currentTime;
   const remaining = aud.duration - current;
   const stateText = aud.paused ? "已暂停" : "播放中";
   statusDisplay.innerHTML = `<span style="color:#CC00FF">${stateText}：</span><span style="color:#FF0088">${formatTime(-remaining)}</span>`
         var tt = 20;
         var str = 'M0 100';
         Array.from({length: tt}).forEach((_,k) => {
            var x = k * (390 / tt);
            var y = k % 2 === 0 ? 100 : Math.floor(Math.random() * 200);
            str += `L${x} ${y} `;
         });
         str = str.trim();
         path = `${str} L400 100`;
         p1.setAttribute('d', path);
   });
player.onclick = () => {
aud.paused ? aud.play() : aud.pause();
papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
vids.forEach(vid => aud.paused ? vid.pause() : vid.play());
player.title = aud.paused ? "播放" : "暂停";
const current = aud.currentTime;
const remaining = aud.duration - current;
const stateText = aud.paused ? "已暂停" : "播放中";
statusDisplay.innerHTML = `<span style="color:#CC00FF">${stateText} ：</span><span style="color:#FF0088">${formatTime(-remaining)}</span>`
};
let fs = true,fsTimer;
fullscreen.onclick = ()=>{
if(fs){
fullscreen.innerText = '退出全屏';
papa.requestFullscreen();
}else{
fullscreen.innerText = '全屏欣赏';
document.exitFullscreen();
}
fs = !fs;
};
papa.addEventListener('mousemove', () => {
clearTimeout(fsTimer);
fullscreen.style.opacity = '1';
fsTimer = setTimeout(() => fullscreen.style.opacity = '0', 2500);
});
player.onanimationiteration = () => player.style.setProperty('filter', `hue-rotate(${30 + Math.random() * 180}deg)`);
papa.addEventListener('contextmenu', e => e.preventDefault());
papa.addEventListener('dragstart', e => e.preventDefault());
function tzRun() {
const frg = new DocumentFragment(), num = 3;
for (let i = 0; i <= num; i ++) {
   const img = document.createElement('img');
   img.src = 'https://638183.freep.cn/638183/small/2025/bl01.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);
}
tzRun();
</script>
</body>
</html>

杨帆发表于 2026-8-15 07:09

《人是_》是周深演唱的电影《流浪地球 2》定义主题曲，由唐恬作词、钱雷作曲，于 2023 年 1 月随电影宣传发布。欢迎鉴赏~

梦江南 发表于 2026-8-15 08:06

哇，看杨帆的音画是种享受。

梦江南 发表于 2026-8-15 08:07

一帖音画里融入了这么多的元素，只有杨帆能做到。佩服!

梦江南 发表于 2026-8-15 08:09

周深演唱的电影《流浪地球 2》定义主题曲，好听。谢谢杨帆分享！{:4_187:}

夕阳黄昏 发表于 2026-8-15 08:11

欣赏美帖，赞！

杨帆发表于 2026-8-16 00:04

梦江南发表于 2026-8-15 08:06
哇，看杨帆的音画是种享受。

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

杨帆发表于 2026-8-16 00:05

夕阳黄昏发表于 2026-8-15 08:11
欣赏美帖，赞！

谢谢夕阳老师鼓励，请多指导{:4_180:}

页: [1]

花潮论坛's Archiver

人是