亚伦影音工作室 发表于 2024-12-14 11:32

长图实现动图可控效果【下雪】

本帖最后由 亚伦影音工作室 于 2024-12-14 11:32 编辑 <br /><br /><style>
#papa { margin: 180px 0 20px calc(50% - 721px); background:#800 url(https://pic.imgdb.cn/item/67453660d0e0a243d4d0cf59.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;--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); }

#picc {z-index: 2;
      top:0%; left:0%;
display: block;position: absolute;
    width: 1286px; height: 720px;
    background: url(https://pic.imgdb.cn/item/675cf3c3d0e0a243d4e3c992.jpg)no-repeat0px 0px/9600px 720px;
animation: mheart steps(15) 2s infinite var(--state);
      mix-blend-mode: lighten;
}
@keyframes mheart {
0% {background-position: 0px 0;}
100% {background-position: -9600px 0;}
}
#mypic{top:87%; 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: burstx steps(5) 1s infinitevar(--state);}
@keyframes burstx {0% {background-position: 0px 0;}
100% {background-position: -250px 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="mypic" ></div>
<div id="picc" ></div>
<audio id="aud" src="https://s2.ananas.chaoxing.com/sv-w8/audio/7a/61/be/e13cc5cea989d354e2830c0f035898a0/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 = `等我不再想你 - 陈瑞
作词：唐心语
作曲：王平萍
演唱：陈瑞
编曲：薛云贻
和声：南妮
混音：小多
制作人：飞翔
监制：飞翔
出品：飞翔文化传媒
发行：漫吞吞文化
「未经许可. 不得翻唱翻录或使用」
我该谢谢你的大方得体
还是原谅你的善解人意
你留给我一片荒芜之地
让我埋葬爱情 埋葬回忆
我该笑脸相送你的离去
还是满含热泪拥抱自己
这方圆几里再也不见你
忘不了你的我能去哪里
等我 不再想你只身披上裟衣
从此爱天爱地不爱你
就算你是我上辈子求来的
你不珍惜我又何必可惜
等我不再想你只身披上裟衣
求佛别再让我们相遇
说好不再爱你 就要保持距离
反正再见也不会在一起
我该笑脸相送你的离去
还是满含热泪拥抱自己
这方圆几里再也不见你
忘不了你的我能去哪里
等我 不再想你只身披上裟衣
从此爱天爱地不爱你
就算你是我上辈子求来的
你不珍惜我又何必可惜
等我不再想你只身披上裟衣
求佛别再让我们相遇
说好不再爱你 就要保持距离
反正再见也不会在一起
等我 不再想你只身披上裟衣
从此爱天爱地不爱你
就算你是我上辈子求来的
你不珍惜我又何必可惜
等我不再想你只身披上裟衣
求佛别再让我们相遇
说好不再爱你 就要保持距离
反正再见也不会在一起
反正再见也不会在一起
`;
getAr(lrc);
mypic.onclick = () => aud.paused ?(aud.play()):(aud.pause());
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
mState = () => {papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');};
aud.onplaying = aud.onpause = () => mState();
</script>



小辣椒 发表于 2024-12-14 13:08

亚伦这个现在自己玩玩很溜了{:4_199:}

小辣椒 发表于 2024-12-14 13:09

欣赏亚伦的精彩制作

世外桃源 发表于 2024-12-14 20:04

欣赏欣赏

世外桃源 发表于 2024-12-14 20:04

感谢分享

红影 发表于 2024-12-14 20:57

原来这雪花也是长图，要不是看标题，还以为是动图或视频呢。
这个雪景漂亮，给亚伦老师点赞{:4_199:}
页: [1]
查看完整版本: 长图实现动图可控效果【下雪】