醉美水芙蓉 发表于 2022-7-26 20:09

[活动] 【中伏消暑】第一天 伏：伏羲神天响

<style>
#papa { left: -200px; width: 960px; height: 720px; display: grid; place-items: center; background: lightblue url('https://s1.ax1x.com/2022/07/22/jOgYND.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; overflow: hidden; position: relative; }
#son { width: 700px; box-shadow: inherit; transform: scale(0) rotate(0); }
@keyframes in0 { from { transform: translate(-200%, -150%); } to { transform: translate(0%, 0%); } }
@keyframes out0 { from { transform: translate(0%, 0%); } to { transform: translate(200%, -150%); } }
@keyframes in1 { from { transform: translate(200%, -150%); } to { transform: translate(0%, 0%); } }
@keyframes out1 { from { transform: translate(0%, 0%); } to { transform: translate(200%, 150%); } }
@keyframes in2 { from { transform: translate(200%, 150%); } to { transform: translate(0%, 0%); } }
@keyframes out2 { from { transform: translate(0%, 0%); } to { transform: translate(-200%, 150%); } }
@keyframes in3 { from { transform: translate(-200%, 150%); } to { transform: translate(0%, 0%); } }
@keyframes out3 { from { transform: translate(0%, 0%); } to { transform: translate(-200%, -150%); } }
#papa p { margin: 0; padding: 0; }
#papa input { border: none; outline: none; opacity: .75; cursor: pointer; }
#playbox { position: absolute; left: 10px; bottom: 10px; padding: 10px; font: normal 1em sans-serif; color: #eee; background: rgba(255,255,255,.2); border-radius: 8px; backdrop-filter: blur(1px); overflow: hidden; box-shadow: 1px 1px 2px rgba(0,0,0,.15); z-index: 100; }
#btnplay { width: 30px; height: 30px; border-radius: 50%; }
#btnplay:hover { background: #aaa; color: #ff0000; }
</style>

<div id="papa">
        <img id="son" alt="" src="https://638183.freep.cn/638183/Pic/38/st1.jpg" />
        <div id="playbox">
                <p id="geci" style="font-size: 1.2em; text-shadow: 1px 1px 1px #222">loading ... </p>
                <p style="display: flex; align-items: center; gap: 4px; margin-top: 10px;">
                        <input id="btnplay" type="button" value=">" />
                        <input id="slider" type="range" min="0" max="100" value="0" />
                        <span id="per">00:00</span>
                </p>
        </div>
</div>
<audio id="aud" src="https://www.qqmc.com/up/kwlink.php?id=28637712&.mp3" autoplay="autoplay" loop="loop"></audio>

<script>
let aniId = 0, picId = 0;
let lrcAr = [ ['0.00','纯音乐 -伏羲神天响 '], ['180.00','感谢支持'] ];

let picAr = [
    'https://s1.ax1x.com/2022/07/26/jzzm1U.jpg',
    'https://s1.ax1x.com/2022/07/26/jzzEt0.jpg',
    'https://s1.ax1x.com/2022/07/26/jzzepT.jpg',
    'https://s1.ax1x.com/2022/07/26/jzzVhV.jpg',
    'https://s1.ax1x.com/2022/07/26/jzzncF.jpg'
];
let objAni = {
        0: 'in0', 1: 'out0', 2: 'in1', 3: 'out1', 4: 'in2', 5: 'out2', 6: 'in3', 7: 'out3',
        playMode: function() {
                if(aniId % 2 == 0) {
                        son.src = picAr;
                        picId ++;
                        if(picId > picAr.length - 1) picId = 0;
                }
                son.style.animation = this +' 2s linear forwards';
                aniId ++;
                if(aniId > 7) aniId = 0;
        },
}

objAni.playMode()
setInterval('objAni.playMode()', 4000);

slider.onmousedown = () => aud.pause();
slider.onchange = () => { aud.currentTime = slider.value * aud.duration / 100; aud.play(); }
btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('playing', () => btnplay.value = '||');
aud.addEventListener('pause', () => btnplay.value = '>');

aud.addEventListener('timeupdate', () => {
        let prog = 100 * aud.currentTime / aud.duration;
        slider.value = prog;
        per.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);
        for(j=0; j<lrcAr.length; j++){
                if(aud.currentTime >= lrcAr) geci.innerHTML = lrcAr;
        }
});

let toMin = (val) => {
        if(!val) return '00:00';
        val = Math.floor(val);
        let min = parseInt(val / 60);
        let sec = parseFloat(val % 60);
        if(min < 10) min = '0' + min;
        if(sec < 10) sec = '0' + sec;
        return min + ':' + sec;
}
</script>

转转 发表于 2022-7-26 20:14

响彻天上地下，美了古往今来{:4_187:}

醉美水芙蓉 发表于 2022-7-26 20:16

转转 发表于 2022-7-26 20:14
响彻天上地下，美了古往今来

谢谢转转支持！

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

制作真漂亮啊{:4_199:}

闲言不语 发表于 2022-7-26 20:30

自从盘古开天地，三皇五帝至与今！激昂的音乐，令人振奋！

醉美水芙蓉 发表于 2022-7-26 20:56

绿叶清舟 发表于 2022-7-26 20:20
制作真漂亮啊

谢谢清舟美女支持！

醉美水芙蓉 发表于 2022-7-26 20:56

闲言不语 发表于 2022-7-26 20:30
自从盘古开天地，三皇五帝至与今！激昂的音乐，令人振奋！

谢谢不语老师支持！

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

醉美水芙蓉 发表于 2022-7-26 20:56
谢谢清舟美女支持！

不客气了

千羽 发表于 2022-7-26 21:11

水芙蓉的图做的真漂亮，音乐也选的好{:4_199:}

樵歌 发表于 2022-7-26 22:03

响声直冲云宵，好霸气！好好听{:4_178:}

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

激昂的乐曲，漂亮的图图。欣赏水芙蓉好制作{:4_187:}

醉美水芙蓉 发表于 2022-7-26 22:39

绿叶清舟 发表于 2022-7-26 20:20
制作真漂亮啊

谢谢清舟美女支持！

醉美水芙蓉 发表于 2022-7-26 22:40

千羽 发表于 2022-7-26 21:11
水芙蓉的图做的真漂亮，音乐也选的好

谢谢千羽光临支持！

醉美水芙蓉 发表于 2022-7-26 22:40

樵歌 发表于 2022-7-26 22:03
响声直冲云宵，好霸气！好好听

谢谢樵歌欣赏支持！

醉美水芙蓉 发表于 2022-7-26 22:41

红影 发表于 2022-7-26 22:37
激昂的乐曲，漂亮的图图。欣赏水芙蓉好制作

谢谢红影美女支持！

醉美水芙蓉 发表于 2022-7-26 22:41

闲言不语 发表于 2022-7-26 20:30
自从盘古开天地，三皇五帝至与今！激昂的音乐，令人振奋！

谢谢不语老师光临！

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

水芙蓉把多的删了吧。

醉美水芙蓉 发表于 2022-7-27 06:37

加林森 发表于 2022-7-26 23:42
水芙蓉把多的删了吧。

是代码吗？

樵歌 发表于 2022-7-27 20:39

醉美水芙蓉 发表于 2022-7-26 22:40
谢谢樵歌欣赏支持！

听了好几次，真过瘾！{:4_187:}
页: [1]
查看完整版本: [活动] 【中伏消暑】第一天 伏：伏羲神天响