加林森 发表于 2022-7-26 19:23

《梦乡》- 李东勇

本帖最后由 加林森 于 2022-7-26 19:24 编辑 <br /><br /><style>
#papa { left: -242px; width: 1080px; height: 766px; background: #333 url('https://pic.imgdb.cn/item/62dfc744f54cd3f937332175.jpg') no-repeat center/cover; box-shadow: 4px 4px 24px #7e6f52; position: relative; }
#boat { position: absolute; width: 200px; height: 118px; top: calc(100% - 150px); filter: blur(1px); animation: boating 20s linear infinite; }
#playbox { position: absolute; left: 10px; bottom: 10px; padding: 10px; background: rgba(255,255,255,.2); border-radius: 6px; backdrop-filter: blur(1px); overflow: hidden; box-shadow: 1px 1px 2px rgba(0,0,0,.15); z-index: 100; }
#playbox span { margin-left: 10px; font: normal 1.2em sans-serif; color: #eee; text-shadow: 1px 1px 1px #000; }
#btnplay { width: 30px; height: 30px; border-radius: 50%; outline: none; border: none; }
#btnplay:hover { background: #aaa; color: #ff0000; cursor: pointer; }
@keyframes boating { from { left: 100%; } to { left: -200px; } }
</style>



<div id="papa">
        <img id="boat" src='https://638183.freep.cn/638183/t22/hl/boat.gif' alt="" />
        <div id="playbox"><input id="btnplay" type="button" value=">" /><span>梦乡 - 李东勇</span></div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=516654015.mp3" autoplay="autoplay" loop="loop"></audio>

<script>

let slip = 0, idx = 0, total = 500, gap = 100;
let add = setInterval(addDot, gap), del;
let num = (min, max) => Math.floor(Math.random() * (max-min+1)) + min;
let lrcAr = [
      ['00.00','梦乡 - 李东勇'],
      ['100.00','所属专辑：故梦小夜集'],
      ['338.00','谢谢欣赏']
];


<script>
btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('playing', () => btnplay.value = '||');
aud.addEventListener('pause', () => btnplay.value = '>');
</script>

加林森 发表于 2022-7-26 19:24

@马黑黑

绿叶清舟 发表于 2022-7-26 20:21

队长这个制作漂亮，这船用得真好

马黑黑 发表于 2022-7-26 20:48

队长好作品

加林森 发表于 2022-7-26 20:53

绿叶清舟 发表于 2022-7-26 20:21
队长这个制作漂亮，这船用得真好

老黑的代码，我就是使用。

加林森 发表于 2022-7-26 20:55

马黑黑 发表于 2022-7-26 20:48
队长好作品

老黑，这个像素够不够？

绿叶清舟 发表于 2022-7-26 20:55

加林森 发表于 2022-7-26 20:53
老黑的代码，我就是使用。

这个背景图片看着就凉爽了

加林森 发表于 2022-7-26 20:58

绿叶清舟 发表于 2022-7-26 20:55
这个背景图片看着就凉爽了

是啊。

红影 发表于 2022-7-26 22:35

小船儿和背景色彩十分协调呢，欣赏队长好帖{:4_187:}

加林森 发表于 2022-7-26 22:38

红影 发表于 2022-7-26 22:35
小船儿和背景色彩十分协调呢，欣赏队长好帖

谢谢红影支持！{:4_171:}

马黑黑 发表于 2022-7-26 22:51

加林森 发表于 2022-7-26 20:55
老黑，这个像素够不够？

可以可以，但还是小辣椒说了算

加林森 发表于 2022-7-26 23:05

马黑黑 发表于 2022-7-26 22:51
可以可以，但还是小辣椒说了算

{:4_170:}

马黑黑 发表于 2022-7-26 23:55

加林森 发表于 2022-7-26 23:05


对不对呀

加林森 发表于 2022-7-27 00:13

马黑黑 发表于 2022-7-26 23:55
对不对呀

嗯嗯。
页: [1]
查看完整版本: 《梦乡》- 李东勇