【黑师代码】一生一念（致：雨声）

花简静 · 发表于 2024-1-24 19:09

本帖最后由花简静于 2024-1-26 20:17 编辑

花简静 · 发表于 2024-1-24 19:11

本帖最后由花简静于 2024-2-19 20:38 编辑

<style>
#papa {
    margin: 20px 0 30px calc(50% - 931px);
    width:1700px;
    height: 900px;
    top:130px;
    background: url('https://pic.imgdb.cn/item/65ace836871b83018a287c44.webp') no-repeat center/cover;
    box-shadow: 4px 4px 16px #000;
    overflow: hidden;
    z-index: 1;
    position: relative;
    display: grid;
    place-items: center;
}
#mplayer {
    display: grid;
    place-items: center;
    position: absolute;
    width: 500px;
    height: 500px;、
    top:20px;
    z-index: 10;
    cursor: pointer;
}
.doll {
    position: absolute;
    border-radius: 23px;
    opacity: .75;
    background: url('https://pic.imgdb.cn/item/65ac9cab871b83018a0b3d9f.png') no-repeat center/cover ;
    animation: rot var(--duration) var(--delay) infinite linear var(--state);
    top:30px;
}
#vid {
    position: absolute;
    width: 100%;
    height: 110%;
    top: -80px;
    object-fit: cover;
    pointer-events: none;
    mix-blend-mode: screen;
    opacity: .60;
}
@keyframes rot {
    to { transform: rotate(var(--deg)); }
}
</style>
<div id="papa">
    <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2118161413" autoplay loop></audio>
    <video id="vid" src="https://img.tukuppt.com/video_show/15653652/01/06/15/615d34aa3bead.mp4" loop muted></video>
    <div id="mplayer" title="播放&暂停"></div>
</div>

<script>
let sFile = document.createElement('script');
sFile.src = 'https://638183.freep.cn/638183/web/api/lrc.js';
sFile.charset = 'utf-8';
document.head.appendChild(sFile);

sFile.onload = () => {
    LRC({
        papa: '#papa',
        lrcAr: geci,
        btn: '#mplayer',
        lrc_css: 'left: 50%; transform: translate(-50%); bottom: 10px;--bg: linear-gradient(rgba(250,250,250,.25),rgba(    178,34,34,.65)); color: #fff;',
    });
};
let geci = [
    [1.6,"单曲：一生一念",1.1],
    [2.71,"仙剑六影视剧《祈今朝》遗爱轮回曲",1.2],
    [3.94,"歌手：单依纯",1.4],
    [5.35,"所属专辑：一生一念",1.4],
    [6.79,"作词 : 沈忞维/陈恬",1.2],
    [7.98,"作曲 : 陈恬",1.4],
    [9.35,"编曲 : 符昕",1.1],
    [10.45,"制作人 : 黄一",1.2],
    [11.69,"出品：网易·云上",1.2],
    [12.85,"学习黑师《浮光》多层旋转效果",3.2],
    [16.01,"",19.7],
    [35.71,"一根枝桠 两生的花",4.7],
    [41.65,"秋来春去终落下",3.6],
    [46.9,"日升月落 能否 给你柔软回答",9.3],
    [60.12,"梧桐树下 雨滴敲打",4.5],
    [66.25,"折枝来换回忆无暇",4.4],
    [72.02,"如丝线 织烟雨入画",4.1],
    [77.06,"也结成 如虹牵挂",3.9],
    [82.34,"许你一生一世亦嗔亦痴的年华",5.7],
    [88.03,"换你前尘往事湮没于喧哗",6.0],
    [94.06,"陪你颠沛流离亦步亦趋轻咽下",7.0],
    [101.01,"别害怕 别害怕",4.8],
    [107.14,"写我一丝一缕一字一句的挣扎",5.9],
    [113.03,"为你不由理智心乱也犯傻",4.7],
    [119.05,"赌上一生一念一心一愿一刹那",5.8],
    [126.02,"不作答 不作罢",4.0],
    [149.01,"无边烟霞 织幅落花",6.6],
    [155.58,"替我送你一诺无价",5.7],
    [161.32,"将心事 随血色融化",5.5],
    [166.79,"可听见 痴语喑哑",4.2],
    [171.01,"许你一生一世亦嗔亦痴的年华",6.0],
    [177.05,"换你前尘往事湮没于喧哗",7.0],
    [184.05,"陪你颠沛流离亦步亦趋轻咽下",6.0],
    [190.07,"别害怕 别害怕",4.8],
    [196.08,"写我一丝一缕一字一句的挣扎",5.9],
    [202.46,"为你不由理智心乱也犯傻",4.4],
    [209.04,"赌上一生一念一心一愿一刹那",5.8],
    [215.19,"不作答 不作罢",6]
];
var setSize = (ww) => Math.sqrt(2 * Math.pow(ww,2));
var size = setSize(mplayer.offsetWidth / 2);

[...new Array(9).keys()].forEach(key => {
    var item = document.createElement('div');
    item.className = 'doll';
    var deg = key % 2 == 0 ? -360 : 360;
    item.style.cssText += `
        width: ${size}px;
        height: ${size}px;
        background-color: transparent;
        --duration: ${Math.random() * 10 + 10}s;
        --delay: ${Math.random() *-2}s;
        --deg: ${deg}deg;
    `;
    mplayer.appendChild(item);
    size = setSize(size / 1.8);
});
aud.addEventListener('playing', mState, false);
aud.addEventListener('pause', mState, false);
mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
function mState() {
    aud.paused
        ? (papa.style.setProperty('--state', 'paused'), vid.pause(), mplayer.title = '播放')
        : (papa.style.setProperty('--state','running'), vid.play(), mplayer.title = '暂停');
}
</script>
<br><br><br><br><br><br><br><br><br>