【简静音画】明明

花简静

花简静

<style>#papa { margin: 0 0 0 calc(50% - 831px);  width: 1700px; height: 900px; background: url('https://pic.imgdb.cn/item/6559d3adc458853aefa1bc80.webp') no-repeat center/cover; box-shadow: 4px 4px 8px black; overflow: hidden; display: grid; place-items: center; z-index: 1; position: relative; --state: running; }
#vid1 {
    position: absolute;
    width: 120%;
    height: 120%;
    top:-100px;
    left:-301px;
    object-fit: cover;
    pointer-events: none;
    mix-blend-mode: screen;
    z-index:3;
    opacity: .66;
}
#vid2 {
    position: absolute;
    width: 100%;
    height: 110%;
    top:-80px;
    object-fit: cover;
    pointer-events: none;
    mix-blend-mode: screen;
    z-index: 5;
    opacity: .19;
}</style>
<div id="papa">
<video id="vid1" src="https://img.tukuppt.com/video_show/2269348/00/14/92/5e67b21fa8e26.mp4" autoplay="" loop="" muted=""></video>
<video id="vid2" src="https://img.tukuppt.com/video_show/2405811/00/70/22/607f0a9c8e2cf.mp4" autoplay="" loop="" muted=""></video>
</div>
<audio id="aud" src="http://music.9yuefeng.com/forum.php?mod=attachment&aid=MTExfDEwMmZkNDZkfDE3MDgzMDE4MDZ8MjZ8OTY%3D.mp3" autoplay="" loop=""></audio>
<script>(function() {
    let script = document.createElement('script');
    script.src = 'https://638183.freep.cn/638183/web/api/anklet_lrc.js';
    script.charset = 'utf-8';
    document.head.appendChild(script);
    let geci = [     
                [1.12,"单曲：明明",1.5],
    [2.58,"所属专辑：“海边岩下白山猹”",1.6],
    [4.2,"原唱：周深",1.6],
    [5.82,"翻唱：白浅熙/猹猹子",1.4],
    [7.26,"后期：陌九",1.1],
    [8.31,"学习黑师《变奏的梦想 - 酹江月》脚链频谱效果",5.5],
    [19,"念念不忘情未了 在耳鬓厮咬",5.9],
    [26.64,"回忆触了礁 无处停靠",5.5],
    [33.79,"两两相望 雨潇潇 谁化作云烟飘渺",6.1],
    [41.04,"留下心的孤岛 做无岸波涛",6.1],
    [50.1,"明明你知道 明明我明了",2.9],
    [53.44,"明明爱锁在眼底缠绕",3.1],
    [57.04,"为一个拥抱 用一生灼烧",3.4],
    [61.01,"在千帆过尽里寻找",2.5],
    [64.05,"明明你知道 明明我明了",3.7],
    [68.07,"明明愿生生誓死缠绕",3.1],
    [72.07,"为一刻心跳 用天荒凭吊",3.1],
    [76.03,"永不离散 我们早说好",4.2],
    [96,"念念不忘情未了 在耳鬓厮咬",5.5],
    [103,"回忆触了礁 无处停靠",5.8],
    [110.35,"爱恨纷扰忘不了 就算隔天地遥遥",6.1],
    [117.92,"灵魂相拥惊扰怎一笔勾销",5.7],
    [126.04,"明明你知道 明明我明了",3.5],
    [129.93,"明明爱锁在眼底缠绕",3.1],
    [133.04,"为一个拥抱 用一生灼烧",3.9],
    [137.62,"在千帆过尽里寻找",2.5],
    [141.03,"明明你知道 明明我明了",3.2],
    [144.68,"明明愿生生誓死缠绕",3.1],
    [148.45,"为一刻心跳 用天荒凭吊",3.2],
    [152.72,"永不离散 我们早说好",3.9],
    [174.07,"明明你知道 明明我明了",3.2],
    [177.75,"明明爱锁在心底缠绕",3.0],
    [181.06,"为一个拥抱 用一生灼烧",3.6],
    [185.22,"在无尽覆辙里重蹈",2.6],
    [188.98,"明明你知道 明明我明了",3.0],
    [192.44,"明明抹不掉魂牵梦绕",3.0],
    [196.08,"为一刻心跳 用天荒凭吊",3.6],
    [200.18,"留住你一眼 哪怕多一秒",6.5] ];
    script.onload = () => {
        HCPlayer({
            papa: '#papa',
            lrcAr: geci,
lrc_css: 'bottom: 20px;  --bg: linear-gradient(rgba(240,240,180,.2),rgba(240,240,180,.4)); color: Wheat;',
                      fs_css: 'bottom: 10px; background: transparent;color: white;left:5%;bottom:5%;',
                   player_css: `
                   top: 380px;
                               left:230px;
                border-width: 0;
                color: #fff;
                --size: 160px;
                --bRad: 30%;
                --track: gray;
                --prog: lightblue;
                --btnBg: linear-gradient(orange, snow);
            `,
            lizi: { color1: 'lightyellow', color2: 'silver' },
        });
    };
    [...new Array(5).keys()].forEach((e,k) => {
        e = document.createElement('span');
        e.className = 'meteor';
        e.style.cssText += `
            left: ${50 * Math.random()}%;
            top: ${10 * Math.random()}%;
            --du: ${3 + Math.random() * 2}s;
            --delay: -${Math.random() * 1}s;
            --ww: ${25 + Math.random() * 10}px;
        `;
        papa.appendChild(e);
    });
})();
document.querySelector('.mydiv').onclick = () => aud.paused ? vid.pause() : vid1.play();</script>

花简静

二楼是套用代码。。。。
1.第5行的图片地址换成自己的就能用了。
https://pic.imgdb.cn/item/6559d3adc458853aefa1bc80.webp（这个可以换掉）
2.倒数第一行的这个网易音乐地址换成自己的音乐
https://music.163.com/song/media/outer/url?id=2077221280（这个网易云找到歌的外链地址后，换后面的数字）
3.如果想换动态视频，就换后面的MP4文件（熊猫办公，源文件212行）
https://img.tukuppt.com/video_sh ... 2/5e67b21fa8e26.mp4（可以换掉）
https://img.tukuppt.com/video_sh ... 1/5e57cba4350bd.mp4（可以换掉）

听风雨

沙发欣赏～

听风雨

愿意分享代码的人都值得尊敬

竹影

花简静 发表于 2023-11-19 18:29
#mydiv { margin: 0 0 0 calc(50% - 931px);
display: grid;
place-items: center;

谢谢老师精美音画

竹影

花简静 发表于 2023-11-19 18:34
二楼是套用代码。。。。
1.第六行的图片地址换成自己的就能用了。
https://pic.imgdb.cn/item/6559d3adc458 ...

谢谢老师无私分享

竹影

问好老师，祝好！

清梦

好看的图，好看的特效

清梦

好听的歌，图图养眼，
问好简静老师，感谢分享佳作