殇雪
本帖最后由 亚伦影音工作室 于 2024-12-14 08:02 编辑 <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/675bf798d0e0a243d4e39673.png)no-repeat0px 0px/3858px 860px;
animation: heart steps(3) 1s infinite var(--state);
}
@keyframes heart {
0% {background-position: 0px 0;}
100% {background-position: -3858px 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/78/9e/68/a59e30486a25291a76d5c3403d02430b/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 = `殇雪 (DJ版) - 暴林
词：陈金文/凡间精灵
曲：凡间精灵
编曲：冯丹
和声：俞子欣
DJ制作：伟伟
混音：卢晓武
监制：王婷婷
制作公司：Clever Music@克莱威尔
（未经许可请勿翻唱）
望着窗外的飘雪
回到我们曾经的世界
我们在雪中追逐嬉戏
串串脚印印在我心田
还是那个飘雪的冬天
你和我分手说再见
望着你离去的身影
雪花化成泪水模糊我视线
每当雪花纷纷飘落
想你是我戒不掉的习惯
望着天空我苦苦追问
为何老天也牵错这情缘
每当雪花纷纷飘落
念你是我最痛的牵绊
多少次拨通你的电话
却又默默挂断
我不知不觉泪连连
望着窗外的飘雪
回到我们曾经的世界
我们在雪中追逐嬉戏
串串脚印印在我心田
还是那个飘雪的冬天
你和我分手说再见
望着你离去的身影
雪花化成泪水模糊我视线
每当雪花纷纷飘落
想你是我戒不掉的习惯
望着天空我苦苦追问
为何老天也牵错这情缘
每当雪花纷纷飘落
念你是我最痛的牵绊
多少次拨通你的电话
却又默默挂断
我不知不觉泪连连
每当雪花纷纷飘落
想你是我戒不掉的习惯
望着天空我苦苦追问
为何老天也牵错这情缘
每当雪花纷纷飘落
念你是我最痛的牵绊
多少次拨通你的电话
却又默默挂断
我不知不觉泪连连
`;
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>
这雪花做的太美啦！ 仔细看了一下代码，亚伦的创意不错的，这种动图做起来简单，而且也是漂亮的 欣赏亚伦的精彩制作 又是长图制作，这个效果特别美{:4_187:} 欣赏欣赏 感谢佳作分享 发现你互动很少，要积极参与互动
页:
[1]