长图转动图音乐控制新尝试
本帖最后由 亚伦影音工作室 于 2024-12-13 16:41 编辑 <br /><br /><style>#papa { margin: 180px 0 20px calc(50% - 721px); background:#800 url('https://pic.imgdb.cn/item/67334a1bd29ded1a8c90061b.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;--state: running;}
#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); }
#pic {top:-10%; left:0%;z-index: 1;
display: block;position: absolute;
width: 1286px; height: 860px;
background: url(https://pic.imgdb.cn/item/675bec53d0e0a243d4e377ef.jpg)no-repeat0px 0px/10288px 860px;
animation: heart steps(8) 3s infinite var(--state);
}
@keyframes heart {
0% {background-position: 0px 0;}
100% {background-position: -10288px 0;}
}
#vid {z-index: 2;
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
mix-blend-mode: lighten;
}
#mypic {top:80%; left:3%;z-index: 40;
display: block;position: absolute;
width: 154px; height: 154px;
background: url(https://pic.imgdb.cn/item/674d708dd0e0a243d4dbe47f.png) 0 0 no-repeat;
animation: heart-burst steps(4) 1s infinite var(--state);
}
@keyframes heart-burst {
0% {background-position: 0px 0;}
100% {background-position: -616px 0;}
}
#per{top:80%; left:30%;z-index: 40;
display: block;position: absolute;}
</style>
<div id="papa">
<div id="tz" data-lrc="亚伦影音"></div>
<div id="pic" ></div>
<div id="mypic" ></div>
<video id="vid" src="https://video-qn.51miz.com/preview/video/00/00/14/01/V-140185-2C72CFDE.mp4" autoplay loop muted></video>
</div>
<audio id="aud" src="https://s2.ananas.chaoxing.com/sv-w8/audio/07/32/e8/80dd54041cde4d05aa3d3a62eaee00c1/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 = `作词：任夏
作曲：任夏/曲多美
编曲：王文达
吉他：黄耀增
和声编写/和声：谌宥
人声编辑：迟色
混音：浓汤宝
制作人：亚伦
冬雪飘落
监制：熊磊/王腾飞
宣发策划：姜雪/万畅/陈建华
宣发：星云计划x 一米星空
艺人经纪：韦耀
发行人：韦琪
发行公司：万象星云
冬雪飘落
天慢慢变凉
夜慢慢变长
我一想到你
却突然的忧伤
常常问自己
这样累不累
好想知道你现在
把心交给了谁
冬雪飘落 它轻轻对我说
说你身边 已有人代替我
回头看看我们也曾无话不说
怎么最后走着走着却散了
冬雪飘落 它轻轻对我说
说你现在 已不再需要我
明明我们之间谁都没有犯错
可惜到最后却成了彼此
余生的过客
常常问自己
这样累不累
好想知道你现在
把心交给了谁
冬雪飘落 它轻轻对我说
说你身边 已有人代替我
回头看看我们也曾无话不说
怎么最后走着走着却散了
冬雪飘落 它轻轻对我说
说你现在 已不再需要我
明明我们之间谁都没有犯错
可惜到最后却成了彼此
余生的过客
冬雪飘落 它轻轻对我说
说你身边 已有人代替我
回头看看我们也曾无话不说
怎么最后走着走着却散了
冬雪飘落 它轻轻对我说
说你现在 已不再需要我
明明我们之间谁都没有犯错
可惜到最后却成了彼此
余生的过客`;
getAr(lrc);
mypic.onclick = () => aud.paused ?(aud.play(),vid.play()):(aud.pause(),vid.pause());
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
mState = () => {papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');};
aud.onplaying = aud.onpause = () => mState();
</script>
鸣谢：有声有色-——ps素材 好看好听，好制作 感谢佳作分享 很有创意，谢谢亚伦老师精彩分享{:4_191:} 又是一个长图，现在做了背景感觉也是漂亮的{:4_199:} 亚伦这个图，只能你自己会做了，这个效果的背景确实刚好有声有色ps制作可以用上，别人玩这个有难度的{:4_170:} 谢谢亚伦分享，小辣椒确实太忙了，这种效果我的动图应该可以的 小辣椒 发表于 2024-12-13 21:31
亚伦这个图，只能你自己会做了，这个效果的背景确实刚好有声有色ps制作可以用上，别人玩这个有难度的{:4_17 ...
是的。方法是把动图分解几个帧静态图，然后再做成长图，然后放在代码里。 这个漂亮，小播和背景都是长图，结合得如此完美{:4_199:}
页:
[1]