炫酷闪条-喇叭-我和岁月拉个勾 演唱Singer：水儿
本帖最后由 亚伦影音工作室 于 2024-12-6 09:38 编辑 <br /><br /><style>#papa { margin: 10px 0 20px calc(50% - 721px); background:#800 url('https://pic.imgdb.cn/item/6703b13ed29ded1a8c58cfd3.webp')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: 3px;position: absolute;background:#000;border: 1px solid #fff;overflow: hidden;}
#mypic {top:0%; left:-1%;z-index: 4;
display: block;position: absolute;
width:800px; height: 3px;
background: url(https://pic.imgdb.cn/item/6751dd94d0e0a243d4de5a9d.png)no-repeat center/4000px 3px;
animation: heart-burst steps(5) 1.25s infinite;
}
@keyframes heart-burst {
0% {background-position: 0px 0;filter:hue-rotate(360deg)contrast(110%)brightness(820%);}
100% {background-position: -4000px 0;}
}
#pyie {top:85%; left:3%;z-index: 44;
display: block;position: absolute;
width: 50px; height: 50px;
background: url(https://pic.imgdb.cn/item/674f8e7ed0e0a243d4dce5ed.png) no-repeat center/250px 50px;
animation: burst steps(5) 1s infinite;
}
@keyframes burst {
0% {background-position: 0px 0;}
100% {background-position: -250px 0;}
}
</style>
<div id="papa">
<div id="tz" data-lrc="亚伦影音"></div>
<div id="pyie" ></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>
欣赏佳作，问候亚伦。 这长图小喇叭好，比上次的只有2个弧度的更自然。
亚伦老师的小播越做越漂亮了{:4_199:} 底下还有个炫酷彩条效果。所有的动态和视频都能一键全控。
制作漂亮，给亚伦老师点赞{:4_199:}
红影 发表于 2024-12-6 10:36
底下还有个炫酷彩条效果。所有的动态和视频都能一键全控。
制作漂亮，给亚伦老师点赞
彩跳没有做好，待再做一个！ 亚伦影音工作室 发表于 2024-12-6 10:42
彩跳没有做好，待再做一个！
嗯嗯，等着欣赏亚伦老师的新作{:4_187:} 好听好看，谢谢亚伦老师精彩分享{:4_191:} 这个和刚才看见的播放器是同样的？
页:
[1]