论坛 › 欢乐水吧 › 《光阴仙子》- 阿轮 也算原创照片吧！

加林森 发表于 2022-7-10 20:38

《光阴仙子》- 阿轮 也算原创照片吧！

<style>
#papa { left: -202px; width: 1000px; height: 700px; background: blue url('https://pic.imgdb.cn/item/62cadd0bf54cd3f9379fdaa5.jpg') no-repeat center/cover; box-shadow: 4px 4px 24px #000; position: relative; }
#hunter { position: absolute; width: 28px; height: 35px; transition: all 3s; z-index: 99; }
#prey { position: absolute; width: 160px; height: 180px; border-radius: 50%; }
#btnplay { position: absolute;left: 20px; top: 20px; width: 30px; height: 30px; cursor: pointer; border: none; outline: none; border-radius: 50%; }
#btnplay:hover { color: red; box-shadow: 1px 1px 1px #000; }
#lrcbox { position: absolute;left: 60px;top: 20px;font: normal 1.2em / 1.6em '宋体', sans-serif;color: snow;text-shadow: 1px 1px 2px #000; }
</style>

<div id="papa">
        <input id="btnplay" type="button" value=">" />
        <div id="lrcbox">LRC LOADING ...</div>
        <img id="hunter" alt="" src="https://pic.imgdb.cn/item/62cc192bf54cd3f9370db3df.gif" />
        <img id="prey" src="https://pic.imgdb.cn/item/62cab895f54cd3f93765232f.gif" alt="" />
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=206133.mp3" autoplay="autoplay" loop="loop"></audio>

<script>
let lrcAr = [
        ['0.00','曲名 : 光阴仙子'],
        ['5.00','歌手 : 阿轮'],
        ['10.00',' 纯音乐欣赏'],
        ['160.00','谢谢欣赏 ']
];

let num = (min, max) => Math.floor(Math.random() * (max-min+1)) + min;
setTimeout(gogo,100);
btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('playing', () => btnplay.value = '||');
aud.addEventListener('pause', () => btnplay.value = '>');

aud.addEventListener('timeupdate',function(){
        let tt = aud.currentTime;
        for(j=0; j<lrcAr.length; j++){
                if(tt >= lrcAr) lrcbox.innerHTML = lrcAr;
        }
});

function gogo() {
      let left = num(50,800), top = num(420,518);
      prey.style.left = left + 'px';
      prey.style.top = top + 'px';
      hunter.style.left = left + 110 + 'px';
      hunter.style.top = top - 50 + 'px';
      setTimeout(gogo,6000);
}

</script>

加林森 发表于 2022-7-10 20:40

@马黑黑

马黑黑 发表于 2022-7-10 20:43

动图可以是透明背景的，用PS弄弄

加林森 发表于 2022-7-10 20:48

马黑黑 发表于 2022-7-10 20:43
动图可以是透明背景的，用PS弄弄

我目前还没有用这个软件。才把电脑搞好，有点怕了。

绿叶清舟 发表于 2022-7-10 20:54

队长好制作，黑色背景的图片加了滤镜看上去就透明的了

马黑黑 发表于 2022-7-10 20:55

加林森 发表于 2022-7-10 20:48
我目前还没有用这个软件。才把电脑搞好，有点怕了。

美图秀秀总可以吧

小辣椒 发表于 2022-7-10 20:56

队长这个小动图，论坛的小章也是可以用的

加林森 发表于 2022-7-10 21:38

绿叶清舟 发表于 2022-7-10 20:54
队长好制作，黑色背景的图片加了滤镜看上去就透明的了

嗯嗯。谢谢了。

加林森 发表于 2022-7-10 21:39

马黑黑 发表于 2022-7-10 20:55
美图秀秀总可以吧

我再多试一试才行。

加林森 发表于 2022-7-10 21:39

小辣椒 发表于 2022-7-10 20:56
队长这个小动图，论坛的小章也是可以用的

嗯嗯。我得慢慢来。

马黑黑 发表于 2022-7-10 21:42

加林森 发表于 2022-7-10 21:39
我再多试一试才行。

可以的

加林森 发表于 2022-7-10 21:45

马黑黑 发表于 2022-7-10 21:42
可以的

嗯嗯。

加林森 发表于 2022-7-10 22:13

绿叶清舟 发表于 2022-7-10 20:54
队长好制作，黑色背景的图片加了滤镜看上去就透明的了

清舟，我这个还没有改过来呢？

红影 发表于 2022-7-10 22:30

背景图漂亮，两个动图也好看。欣赏队长好制作{:4_204:}

加林森 发表于 2022-7-10 22:32

红影 发表于 2022-7-10 22:30
背景图漂亮，两个动图也好看。欣赏队长好制作

晚安。拜拜~~·

绿叶清舟 发表于 2022-7-11 19:08

加林森 发表于 2022-7-10 22:13
清舟，我这个还没有改过来呢？

滤镜要放在动图上的，现在底图变了

加林森 发表于 2022-7-11 20:00

绿叶清舟 发表于 2022-7-11 19:08
滤镜要放在动图上的，现在底图变了

是的。

绿叶清舟 发表于 2022-7-11 20:06

加林森 发表于 2022-7-11 20:00
是的。

#hunter { position: absolute; width: 80px; height: 102px; transition: all 3s; z-index: 99; }
#prey { position: absolute; width: 160px; height: 180px; border-radius: 50%; }
滤镜放在这二个里面

加林森 发表于 2022-7-11 20:38

绿叶清舟 发表于 2022-7-11 20:06
#hunter { position: absolute; width: 80px; height: 102px; transition: all 3s; z-index: 99; }
#pre ...

嗯嗯。我已经放进去的了。

查看完整版本: 《光阴仙子》- 阿轮 也算原创照片吧！