论坛 › 动画音画 › 《花轿里的人》克隆

翁奕童苑 发表于 2022-9-15 12:27

《花轿里的人》克隆

本帖最后由 翁奕童苑 于 2022-9-15 12:27 编辑 <br /><br /><p></p>

<style>#papa{left:-184px;width:960px;height:600px; top: 20px;background:tan url('https://s1.ax1x.com/2022/09/15/vxRTe0.jpg') no-repeat center/cover;box-shadow:0px 0px 2px #000;hidden;border-radius:6%;display:grid;place-items:center;position:relative;z-index:1}#mplayer{position:absolute;left:20px;bottom:0;width:300px;height:80px;user-select:none;display:grid;place-items:center;cursor:pointer}#mplayer:hover #btnwrap,#mplayer:hover #prog{transform:translateY(var(--yy))}#mplayer:hover #btnwrap{background:linear-gradient(to top right,rgba(0,0,255,.45),rgba(255,0,0,.35));border-radius:50%;opacity:.75}#btnwrap,#prog{position:absolute;display:grid;place-items:center;transition:.5s}#btnwrap{--yy:-15px;width:40px;height:40px;transform:rotate(45deg);border:1px solid gray;border-radius:6px;opacity:.25}#btnplay{width:20px;height:20px;background:rgba(255,255,255,.15);clip-path:polygon(0 0,0 100%,100% 50%)}#btnpause{width:2px;height:20px;border-style:solid;border-width:0 4px;border-color:transparent rgba(255,255,255,.15);display:none}#prog{--yy:20px;width:300px;height:16px;border-radius:10px;background:linear-gradient(90deg,rgba(0,0,255,.45),rgba(255,0,0,.35) 100%,transparent 0);border:1px solid gray;font:400 14px / 16px sans-serif;color:gray}#lrc{position:absolute;top:480px;font:700 2em sans-serif;color:transparent;letter-spacing:2px;background:linear-gradient(-90deg,#8b0000,gold,orange,snow) 100% 0 / 200% 100%;background-clip:text;-webkit-background-clip:text;animation:bgMerge 5s linear infinite}.ball{--ss:0s;position:absolute;width:10px;height:10px;left:180px;top:100px;border-radius:50%;background:red;offset-distance:0;offset-path:path("M150 60 Q245 -10 280 60 Q320 150 150 290 Q-20 150 20 60 Q65 -10 150 60z");animation:move 6s var(--ss) linear infinite}@keyframes move{to{offset-distance:100%}}@keyframes bgMerge{from{background-position:0 0}to{background-position:-100% 0}}#dt{ position: absolute; width: 544px; height: 200px; top: -20px; left: 300px; }
</style>
<div id=papa>
<img id="dt" src="https://pic.imgdb.cn/item/62f232a416f2c2beb1d93890.gif" alt="" />
<div id=lrc>lrc</div><div id=mplayer><div id=btnwrap><span id=btnplay></span><span id=btnpause></span></div><div id=prog>00:00 | 00:00</div></div></div><script>let lrcAr = [
        ['3.58','《花轿里的人》'],
        ['12.85','词/董杰 曲/冯一航'],
        ['20.87','演唱/张敏'],
        ['41.42','迎亲的队伍绕过了那道梁'],
        ['48.15','唢呐声声吹的满沟响'],
        ['55.47','花轿里的你啊 抬头往外望'],
        ['62.49','我站在咱俩相识的那地方'],
        ['69.25','迎亲的队伍翻过了一道道梁'],
        ['76.27','锣鼓声声敲在我心上'],
        ['83.79','花轿里的你啊 可曾想'],
        ['90.31','站在梁上的人儿痛断了肠'],
        ['96.32','啊哈嗨 啊哈嗨'],
        ['103.34','啊哈嗨 哎嗨'],
        ['111.10','一道道的沟沟 一道道梁'],
        ['117.87','曲曲弯弯咋就这么长'],
        ['124.90','我还站在那道梁上'],
        ['131.66','泪珠儿湿透了哥的衣裳'],
        ['138.16','LRC字幕制作/翁奕童苑'],
        ['152.72','迎亲的队伍翻过了一道道梁'],
        ['159.74','锣鼓声声敲在我心上'],
        ['167.51','花轿里的你啊可曾想'],
        ['173.78','站在梁上的人儿痛断了肠'],
        ['179.80','啊啊嗨 啊啊嗨'],
        ['186.82','啊啊嗨 哎嗨'],
        ['194.59','一道道的沟沟 一道道梁'],
        ['201.36','曲曲弯弯咋就这么长'],
        ['208.63','我还站在那道梁上'],
        ['215.40','泪珠儿湿透了哥的衣裳'],
        ['222.42','一道道的沟沟 一道道梁'],
        ['229.18','曲曲弯弯咋就这么长'],
        ['236.21','我还站在那道梁上'],
        ['243.20','泪珠儿湿透了我的衣裳'],
        ['249.73','啊哈嗨 啊哈嗨'],
        ['256.99','啊哈嗨 哎嗨嗨'],
        ['268.50','谢谢欣赏']
];
let aud = new Audio();
let setColor = () => Math.random().toString(16).substr(-6);
aud.src = 'https://www.qqmc.com/up/kwlink.php?id=221384408';
aud.autoplay = true;
aud.loop = true;

Array.from({length: 60}).forEach((ele,key) => {
        ele = document.createElement('span');
        ele.className = 'ball';
        ele.style.cssText += `--ss: ${key * 0.1}s; background: #${setColor()};`;
        papa.appendChild(ele);
});

btnwrap.onclick = () => aud.paused ? aud.play() : aud.pause();
prog.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
aud.addEventListener('pause', () => btnstate());
aud.addEventListener('play',() => btnstate());
aud.addEventListener('timeupdate', () => {
        prog.style.background= 'linear-gradient(130deg, rgba(0,0,255,.45), rgba(255,0,0,.35) ' + aud.currentTime / aud.duration * 100 + '%, transparent 0)';//prog.offsetWidth * aud.currentTime / aud.duration) + 'px 0px';
        prog.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);
        for(j=0; j<lrcAr.length; j++) {
                if(aud.currentTime >= lrcAr) lrc.innerText = lrcAr;
        }
});
let btnstate = () => aud.paused ? (btnplay.style.display = 'block', btnpause.style.display = 'none') : (btnplay.style.display = 'none', btnpause.style.display = 'block');
let toMin = (val)=> {
        if (!val) return '00:00';
        val = Math.floor(val);
        let min = parseInt(val / 60), sec = parseFloat(val % 60);
        if(min < 10) min = '0' + min;
        if(sec < 10) sec = '0' + sec;
        return min + ':' + sec;
}</script>

红影 发表于 2022-9-15 14:30

这个位置圈得满好的，很喜庆的制作。点赞{:4_187:}

红影 发表于 2022-9-15 14:31

效果运用很棒的{:4_204:}

查看完整版本: 《花轿里的人》克隆