我和时光叙个旧

亚伦影音工作室 发表于 2024-12-9 19:54

本帖最后由亚伦影音工作室于 2024-12-9 19:54 编辑 <br /><br /><style>
#papa { margin: 10px 0 20px calc(50% - 721px); background:#800 url('https://pic.imgdb.cn/item/66a34f6ed9c307b7e9581634.jpg')no-repeat center/cover;width: 1286px; height: 720px; box-shadow: 3px 3px 6px gray; overflow: hidden; z-index: 1; position: relative; display: grid; place-items: center;}
#tz { margin: 0px auto; bottom: 0px;width: 840px; height: 300px; border: 0px solid gray; position: absolute;z-index:10;}
#tz::before { content: attr(data-lrc); position: absolute; bottom: 0;margin: 0px 20px;width: 100%; height: 60px; text-align: center; font: 300 4.2em/0em 华文隶书; color:#880000; filter:drop-shadow(#fff 1px 0 0)drop-shadow(#fff 0 1px 0)drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px0); }
#vid {z-index: 2;position: absolute;width: 100%;height: 100%;object-fit: cover;mix-blend-mode: lighten;}
#xkst{left:0%;z-index: 4;bottom: 0px;
width: 1286px;height:8px;position: absolute;background:#0000;border: 1px solid #00ff00;overflow: hidden;}
#mypic {top:0%; left:0%;z-index: 4;
display: block;position: absolute;
width:1200px; height: 8px;
background:linear-gradient(90deg, #ff0000, #00ff80, #fff000, #800000, #0000)no-repeat center/1286px 8px;
animation: heart-burst steps(6) 1s infinite;}
@keyframes heart-burst {0% {background-position: 0px 0;filter:hue-rotate(360deg)contrast(180%)brightness(200%);}
100% {background-position: -1286px 0;}}
#waibao{position: absolute;top:60%; left:2%;width: 125px; height: 185px; background: linear-gradient(90deg, #601000, #333, #601000);border: 2px solid #bbb;
border-radius: 5px;
box-shadow: 0px 1px 5px #000;}
#pyie {top:0%; left:0%;z-index: 44;
display: block;position: absolute;
width: 120px; height: 180px;
background:url(https://pic.imgdb.cn/item/6752c720d0e0a243d4ded0ba.png)no-repeat center/240px 180px;
animation: burst steps(2) 1s infinite;}
@keyframes burst {0% {background-position: 0px 0;}
100% {background-position: -240px 0;}}
</style>
<div id="papa">
<div id="tz" data-lrc="亚伦影音"></div>
<div id="waibao" ><div id="pyie" ></div></div>
<div id="xkst" ><div id="mypic" ></div></div>
<video id="vid" src="https://video-qn.51miz.com/preview/video/00/00/13/09/V-130942-864B05CF.mp4" autoplay loop muted></video>
</div>
<audio id="aud" src="https://s2.cldisk.com/sv-w8/audio/91/c2/c8/a142c6d84637a28db449e2fa62205bc3/audio.mp3" autoplay loop></audio>
<script>
var curkey = 0, lrcAr = [];
var getAr = (text) => {
var ar = text.trim().split('\n');
ar.sort();
var reg = /\[(\d+)[.:](\d+)[.:](\d+)\](.*)/;
ar.forEach(item => {
   let result = item.match(reg);
   let tmsg = parseInt(result) * 60 + parseInt(result) + parseInt(result) / 1000;
   lrcAr.push(.trim()]);
});
};
aud.onseeked = () => curkey = 0;
aud.onplaying = aud.onpause = () => mState();
aud.ontimeupdate = () => {
if(curkey > lrcAr.length - 1) return;
if(aud.currentTime >= lrcAr) {
   tz.dataset.lrc = lrcAr;
   curkey ++;
}
};
var lrc = `我和时光叙个旧
演唱Singer：水儿
词Lyric：简一@超级星声
曲Composer：储楚@超级星声
制作人Producer：亚伦
词曲统筹：幕青L@超级星声
制作统筹：王娜娜
企划：羊羊
出品：亚伦影音
晃晃悠悠走过
几十个春秋
庸庸碌碌虚度
几十个年头
跌跌撞撞踏进
生活的河流
不知不觉走到
人生分叉口
匆匆忙忙挥霍
青春和自由
走走停停只剩
遗憾心中留
纷纷扰扰岁月
让我白了头
说说笑笑独自
饮下这苦酒
我和时光叙个旧
再和人生醉一宿
夜里梦一场春秋
醒来继续走
我和岁月拉个勾
再和红尘牵个手
多少往事已覆水难收
匆匆忙忙挥霍
青春和自由
走走停停只剩
遗憾心中留
纷纷扰扰岁月
让我白了头
说说笑笑独自
饮下这苦酒
我和时光叙个旧
再和人生醉一宿
夜里梦一场春秋
醒来继续走
我和岁月拉个勾
再和红尘牵个手
多少往事已覆水难收
我和时光叙个旧
再和人生醉一宿
夜里梦一场春秋
醒来继续走
我和岁月拉个勾
再和红尘牵个手
多少往事已覆水难收
`;
getAr(lrc);
</script>
<script>
pyie.onclick = () => aud.paused ?(aud.play(),vid.play()):(aud.pause(),vid.pause());
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
mypic.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>mypic.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>mypic.style.animationPlayState = 'paused');
pyie.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>pyie.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>pyie.style.animationPlayState = 'paused');
</script>

红影发表于 2024-12-9 20:45

这个小喇叭播放器按钮也是长图吧，看到暂停时不止一个姿态。
图图下面的炫彩长条也很漂亮，还能一键全控。{:4_199:}

红影发表于 2024-12-9 20:46

欣赏亚伦老师好帖{:4_187:}

秋思梦景 发表于 2024-12-10 06:06

问候老师好！精美播放器制作，向您学习！为您点赞！{:5_116:}{:4_187:}

页: [1]

花潮论坛's Archiver

我和时光叙个旧