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

【三伏消暑】第五天 吐----扬眉吐气

<style>
#papa { left: -214px; width: 1024px; height: 680px; display: grid; place-items: center; background: lightgreen url('https://s1.ax1x.com/2022/07/21/jLDkrD.png') no-repeat center/cover; box-shadow: 3px 3px 20px #000; position: relative; }
#son { width: 600px; box-shadow: inherit; transform: scale(0) rotate(0); }
@keyframes out { from { transform: scale(0) rotate(0); } to { transform: scale(1) rotate(360deg); } }
@keyframes back { from { transform: scale(1) rotate(0); } to { transform: scale(0) rotate(-360deg); } }
@keyframes show { 0%, 100% { transform: translate(0); } 20% { transform: translate(200px); } 80% { transform: translate(-200px); } }
#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://s1.ax1x.com/2022/07/21/jLDkrD.png" />
        <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=42311123.mp3" autoplay="autoplay" loop="loop"></audio>

<script>
let aniId = 0, picId = 0;
let lrcAr = [
        ['6.00','扬眉吐气-高赛燕'],
        ['12.06','演唱：高赛燕'],
        ['25.04','LRC编辑：醉美水芙蓉'],
        ['30.01','家傳的編鍾敲响'],
        ['34.04','敲响神州的序曲'],
        ['38.07','飛天的彩舂忙碌'],
        ['42.07','東風的鴻迷'],
        ['47.01','大紅的腰鼓'],
        ['51.05','昂扬民族的聲誉'],
        ['55.08','桑夏的浪涛'],
        ['57.09','黃盖時代的土地'],
        ['64.04','揚眉吐氣'],
        ['68.03','我們揚眉吐氣'],
        ['72.10','伍仟年的資歷'],
        ['76.06','刻上新時代的世紀'],
        ['81.06','揚眉吐氣'],
        ['85.04','我們揚眉吐氣'],
        ['90.00','伍色土地春秋'],
        ['93.09','開创共和國的奇迹'],
        ['122.04','北京的時間走進'],
        ['126.06','走進中華的世紀'],
        ['130.09','四海的宾朋親憂'],
        ['135.01','伍星的紅旗'],
        ['139.04','懷古的家园'],
        ['143.04','張開复興的國畫'],
        ['147.10','胸襟的版圖'],
        ['150.01','崛起雄獅的身軀'],
        ['156.06','揚眉吐氣'],
        ['160.04','我們揚眉吐氣'],
        ['165.01','伍仟年的資歷'],
        ['168.07','刻上新時代的世紀'],
        ['173.06','揚眉吐氣'],
        ['177.04','我們揚眉吐氣'],
        ['182.03','伍色土地春秋'],
        ['185.09','開创共和國的奇迹'],
        ['192.09','揚眉吐氣'],
        ['196.06','我們揚眉吐氣'],
        ['201.04','伍仟年的資歷'],
        ['205.01','刻上新世代的世紀'],
        ['209.09','揚眉吐氣'],
        ['213.09','我們揚眉吐氣'],
        ['218.06','伍色土地春秋'],
        ['222.04','開创共和國的奇迹'],
        ['229.03','共和國的奇迹'],
        ['235.02','谢谢欣赏！']
];
let picAr = [
        'https://s1.ax1x.com/2022/07/21/jLrjhR.jpg',
        'https://s1.ax1x.com/2022/07/21/jLDUGq.png ',
        'https://s1.ax1x.com/2022/07/21/jLDFKO.png',
        'https://s1.ax1x.com/2022/07/21/jLDPxK.jpg',
        'https://s1.ax1x.com/2022/07/21/jLDAqe.png',
                'https://s1.ax1x.com/2022/07/21/jLDlM8.jpg'
];

let objAni = {
        0: 'out', 1: 'show', 2: 'back',
        playMode: function() {
                if(aniId == 0) {
                        son.src = picAr;
                        picId ++;
                        if(picId > picAr.length - 1) picId = 0;
                }
                son.style.animation = this +' 2s linear forwards';
                aniId ++;
                if(aniId > 2) 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-21 21:42

长中国人志气！做得漂亮极品！{:4_178:}

醉美水芙蓉 发表于 2022-7-21 21:44

樵歌 发表于 2022-7-21 21:42
长中国人志气！做得漂亮极品！

谢谢樵歌欣赏点评！

红影 发表于 2022-7-21 21:56

这个好，非常提气，太赞了{:4_199:}

马黑黑 发表于 2022-7-21 21:59

俺来参加阅兵。俺的车子呢？

醉美水芙蓉 发表于 2022-7-21 22:55

红影 发表于 2022-7-21 21:56
这个好，非常提气，太赞了

谢谢红影美女支持！

醉美水芙蓉 发表于 2022-7-21 22:57

马黑黑 发表于 2022-7-21 21:59
俺来参加阅兵。俺的车子呢？

喔！忘记给黑黑老师叫辆红旗车了！

马黑黑 发表于 2022-7-21 23:43

醉美水芙蓉 发表于 2022-7-21 22:57
喔！忘记给黑黑老师叫辆红旗车了！

那俺就走路阅兵了，看得清楚{:4_170:}

浣溪沙 发表于 2022-7-22 07:05

鼓舞人心，好制作，大赞{:4_178:}

小星世龙 发表于 2022-7-22 08:57

精彩，漂亮，正气十足，点赞！

醉美水芙蓉 发表于 2022-7-22 11:44

浣溪沙 发表于 2022-7-22 07:05
鼓舞人心，好制作，大赞

谢谢朋友支持！

醉美水芙蓉 发表于 2022-7-22 11:45

小星世龙 发表于 2022-7-22 08:57
精彩，漂亮，正气十足，点赞！

谢谢朋友支持！

樵歌 发表于 2022-7-22 16:48

醉美水芙蓉 发表于 2022-7-21 21:44
谢谢樵歌欣赏点评！

客气了{:4_204:}

红影 发表于 2022-7-22 19:56

醉美水芙蓉 发表于 2022-7-21 22:55
谢谢红影美女支持！

说服人的制作真太好了{:4_199:}
页: [1]
查看完整版本: 【三伏消暑】第五天 吐----扬眉吐气