【黑师代码】灵韵（赠：三月风，安静听雨，忘记了）

花简静 · 发表于 2024-1-31 22:28

本帖最后由花简静于 2024-1-31 22:37 编辑

花简静 · 发表于 2024-1-31 22:29

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

<style>
#papa { margin: 20px 0 20px calc(50% - 931px); width: 1700px; height: 900px;top:130px;background: radial-gradient(circle,transparent,rgba(    0,0,0,var(--opa))),url('https://pic.imgdb.cn/item/65ba567c871b83018a6518b2.webp') no-repeat center/cover; box-shadow: 3px 3px 20px #000; overflow: hidden; position: relative; z-index: 1; --opa: .4; }
#mplayer { position: absolute; right: 216px; top: 376px; width: 86px; height: 233px; box-sizing: border-box; cursor: pointer; }
#mplayer::before, #mplayer::after { position: absolute; content: ''; width: 100%; height: 136px; background: url('https://pic.imgdb.cn/item/65ba4c42871b83018a31a70f.png') no-repeat; }
#mplayer::after { height: 97px; top: 136px; background-position: 0 -136px; transform-origin: 50% 0; animation: swear .5s linear infinite alternate var(--state); }
#mplayer:hover { filter: drop-shadow(0 0 60px snow) brightness(1.2); }
@keyframes swear { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
#vid {
    position: absolute;
    width: 100%;
    height: 110%;
    top:-80px;
    opacity: .15;
    object-fit: cover;
    pointer-events: none;
}
</style>

<div id="papa"><video id="vid" src="https://img.tukuppt.com/video_show/2269348/00/14/64/5e594fa25b1d4.mp4" autoplay loop muted></video>
    <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1867132755" autoplay loop></audio>
    <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%);--bg: linear-gradient(rgba(250,250,250,.25),rgba(255,165,0.65)); position: absolute; bottom: 20px; font: bold 1.8em sans-serif; color: #F0F8FF;',
    });
};
let geci = [
    [-1.6,"单曲：繁花（古风女版）",1.6],
    [3.23,"歌手：锦瑟",1.2],
    [4.46,"所属专辑：繁花—《三生三世十里桃花》插曲",1.1],
    [5.59,"学习黑师《记忆》闪烁背景及半图摇曳效果",5.2],
    [10.83,"",12.9],
    [23.07,"遇见你的眉眼",2.9],
    [26.05,"如清风明月",2.8],
    [29.07,"在似曾相识的凡世间",4.7],
    [35.03,"顾盼流连",2.5],
    [38.17,"如时光搁浅",2.4],
    [41.1,"是重逢 亦如初见",3.8],
    [47.02,"缠绵缱绻",2.0],
    [49.01,"有你的思念",3.1],
    [52.09,"温暖在我掌心蔓延",4.6],
    [58,"无涯荒野",2.9],
    [61,"谁忘了时间",2.8],
    [64.06,"一半青涩 一半纯真",4.1],
    [73.06,"数着年月只为花开那一面",5.0],
    [78.09,"就算来来回回错过又擦肩",5.2],
    [84.08,"你的喜悲忧乐我全都预见",5.9],
    [90.02,"三千繁花只为你一人留恋",5.7],
    [108.04,"遇见你的眉眼",2.7],
    [111.29,"如清风明月",2.4],
    [114.05,"在似曾相识的凡世间",4.6],
    [120.01,"顾盼流连",2.1],
    [122.07,"如时光搁浅",3.0],
    [125.08,"是重逢 亦如初见",4.8],
    [132.01,"梦醒蹁跹",2.0],
    [134.02,"有你的画面",3.1],
    [137.08,"温热仍在心底蔓延",4.4],
    [144.05,"混沌流年",1.8],
    [146.41,"谁忘了誓言",2.4],
    [149.4,"一半苦涩 一半情深",3.6],
    [158.15,"数着年月只为花开那一面",4.9],
    [163.07,"就算来来回回错过又擦肩",5.2],
    [170.02,"你的喜悲忧乐我全都预见",5.0],
    [175.05,"三千繁花只为你一人留恋",5.2],
    [181.03,"数着年月只为花开那一面",5.7],
    [187.29,"就算来来回回错过又擦肩",4.4],
    [193,"你的喜悲忧乐我全都预见",5.5],
    [199.09,"三千繁花只为你一人留恋",4.6]
];
let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('pause', () => mState());
aud.addEventListener('playing', () => mState());
setInterval (function() { if(!aud.paused) papa.style.setProperty('--opa', Math.random()); },600);
mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>
<br><br><br><br><br><br><br><br>