论坛 › 欢乐水吧 › 《孤身》- 徐秉龙

加林森 发表于 2022-6-20 17:59

《孤身》- 徐秉龙

本帖最后由 加林森 于 2022-6-21 18:16 编辑 <br /><br /><style>
.outer { left: -224px; width: 1040px; height: 692px; top: 120px; background: linear-gradient(to right top,black,#eee); position: relative; }
.outer h2 { position: absolute; margin: 110px; font: bold 1.8em sans-serif;color: #ccc; text-shadow: 1px 1px 2px #000; }
.picbox        { position: absolute; width: 1040px; height: 692px; animation: fadein 2s; }
.mama { left: 150px; bottom: 380px; width: fit-content; height: fit-content; position: absolute; cursor: pointer; border-radius: 0 100%; background: linear-gradient(transparent,green); }
.wrap { width: 90px; height: 60px; box-reflect: below 0 linear-gradient(rgba(0,0,0,.01),#000); -webkit-box-reflect: below 0 linear-gradient(rgba(0,0,0,.01),#000); position: relative; }
.mama meter { width: 90px; position: relative; }
.wrap span { width: 6px; height: 60px; bottom: -8px; display: inline-block; position: absolute; }
.wrap span::before { position: absolute; content: ''; width: inherit; height: 3px; background: #eee; top: -3px; animation: up 1s ease-in infinite; }
@keyframes up { from { top: -6px; } to { top: -16px; } }
@keyframes fadein { from { opacity: .1; } to {opacity: 1; } }
@keyframes fadeout { from { opacity: 1; } to {opacity: .4; } }
</style>

<div class="outer">
        <h2>孤身 - 徐秉龙</h2>
        <img class="picbox" src="<img src="https://pic.rmb.bdstatic.com/bjh/31cffaf9977cebef9bd64262663b8eda.01.jpeg" alt="" />
        <div class="mama">
                <div class="wrap"></div>
                <meter id="meter" value="0" min="0" max="100" low="33" high="66" optimum="70"></meter>
        </div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1365393542.mp3" autoplay="autoplay" loop="loop"></audio>

<script>

let mama = document.querySelector('.mama'),
        picbox = document.querySelector('.picbox'),
        wrap = document.querySelector('.wrap'),
        lrcbox = document.querySelector('.lrcbox'),
        aud = document.querySelector('#aud'),
        meter = document.querySelector('#meter');
let num = (min, max) => Math.floor(Math.random() * (max-min+1)) + min,
        prog = (tt, cc) => 100 * cc / tt;
let picAr = ['1','2','3','4','5'], idx = 0, flag = true;
let newPic = picAr.map((img) => {
        return ('https://pic.imgdb.cn/item/62b041570947543129fa5a7c.02.jpg' + img + '.jpg');
      return ('https://pic.imgdb.cn/item/62b06cc30947543129376a42.03.jpg' + img + '.jpg');
      return ('https://pic.imgdb.cn/item/62b197ec0947543129a5c55c.04.jpg' + img + '.jpg');
      return ('https://pic.imgdb.cn/item/62b199020947543129a79cde.05.jpg' + img + '.jpg');
      return ('https://pic.imgdb.cn/item/62b19a410947543129a96ec4.06.jpg' + img + '.jpg')
})

Array.from({length: 10}).forEach((ele,key) => {
        ele = document.createElement('span');
        ele.className = 'sskey';
        ele.style.left = key * 6 + key * 3 + 'px';
        ele.style.height = num(10,60) + 'px';
        ele.style.backgroundColor = `rgba(${num(0,255)},${num(0,255)},${num(0,255)},.95)`;
        wrap.appendChild(ele);
})

let sskey = document.querySelectorAll('.sskey');

mama.onclick = () => aud.paused ? aud.play() : aud.pause();

aud.addEventListener('timeupdate', () => {
        Array.from(sskey).forEach((ele) => {
                ele.style.height = num(10, 60) + 'px';
        })
        meter.value = prog(aud.duration, aud.currentTime);
});

let timer = setInterval(() => {
        picbox.style.animation = '';
        idx ++;
        if(idx >= picAr.length) idx = 0;
        picbox.src = newPic;
        flag ? (picbox.style.animation = 'fadeout 2s', flag = false) : (picbox.style.animation = 'fadein 2s', flag = true);
}, 5000);

</script>
<br><br><br><br><br><br><br><br><br><br><br>

绿叶清舟 发表于 2022-6-20 18:32

队长厉害，这么快就来一个了

加林森 发表于 2022-6-20 18:39

绿叶清舟 发表于 2022-6-20 18:32
队长厉害，这么快就来一个了

都没有放歌词的。

绿叶清舟 发表于 2022-6-20 18:42

加林森 发表于 2022-6-20 18:39
都没有放歌词的。

找歌词麻烦了

加林森 发表于 2022-6-20 19:07

绿叶清舟 发表于 2022-6-20 18:42
找歌词麻烦了

就是。还要每句去制作。真麻烦。

醉美水芙蓉 发表于 2022-6-20 19:11

马黑黑 发表于 2022-6-20 19:22

简洁漂亮

加林森 发表于 2022-6-20 19:51

醉美水芙蓉 发表于 2022-6-20 19:11
欣赏队长佳作！

谢谢水芙蓉！

加林森 发表于 2022-6-20 19:52

马黑黑 发表于 2022-6-20 19:22
简洁漂亮

谢谢啦。{:4_191:}

绿叶清舟 发表于 2022-6-20 20:32

加林森 发表于 2022-6-20 19:07
就是。还要每句去制作。真麻烦。

可以用转换的啊

加林森 发表于 2022-6-20 20:35

绿叶清舟 发表于 2022-6-20 20:32
可以用转换的啊

这些我都没有用的。

红影 发表于 2022-6-20 20:37

这个，替换的图片就一张？

加林森 发表于 2022-6-20 20:43

红影 发表于 2022-6-20 20:37
这个，替换的图片就一张？

是的。

樵歌 发表于 2022-6-20 20:59

制作简约些好，反正是听歌哈。

加林森 发表于 2022-6-20 21:32

樵歌 发表于 2022-6-20 20:59
制作简约些好，反正是听歌哈。

就是。没有那么多的时间啊。谢老兄了！

加林森 发表于 2022-6-20 21:39

@小辣椒

小辣椒 发表于 2022-6-20 22:01

队长，你太聪明了{:4_189:}

直接一张图片{:4_178:}

小辣椒 发表于 2022-6-20 22:03

队长动了脑子的，可以做出来就是有成就感，不用去和谁谁比，他们都是玩代码N年的人了，队长才玩代码已经很棒了！！！{:4_178:}

加林森 发表于 2022-6-20 22:06

小辣椒 发表于 2022-6-20 22:01
队长，你太聪明了

直接一张图片

是两张的，我还准备继续加的。试一下真好！{:4_189:}

小辣椒 发表于 2022-6-20 22:08

加林森 发表于 2022-6-20 22:06
是两张的，我还准备继续加的。试一下真好！

队长转换就一张，你继续加，看看黑黑的代码是5张可以转换

查看完整版本: 《孤身》- 徐秉龙