【简静音画】因为遇见你（致千山论坛所有亲们）

花简静 · 发表于 2023-11-26 10:44

本帖最后由花简静于 2023-11-26 18:06 编辑

花简静 · 发表于 2023-11-26 10:45

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

<style>
#papa {
    margin: 0 0 0 calc(50% - 931px);
    display: grid;
    place-items: center;
    width: 1700px;
    height: 900px;
    top:130px;
    background: lightblue url('https://pic.imgdb.cn/item/65630e26c458853aef977f75.webp') no-repeat center bottom;
    box-shadow: 3px 3px 20px #000;
    position: relative;
    overflow: hidden;
    z-index: 1;
    --state: running;
}
#papa::before {
    position: absolute;
    content: '';
    width: 100%;
    height: 22%;
    bottom: 1px;
    background: inherit;
    filter: url(#turb);
}
#papa > svg { stroke-linecap: round; }
.myfilter { position: absolute; width: 0; height: 0; }
.play_pic {
    position: absolute;
    width: 160px;
    height: 160px;
    right: 100px;
    opacity: .75;
    cursor: pointer;
    animation: rot 6s infinite linear var(--state);
    z-index: 200;
}
.play_pic:nth-of-type(1) {
    width: 300px;
    height: 300px;
    filter: sepia(70%);
}

.play_pic:nth-of-type(2) {
    width: 230px;
    height: 230px;
    filter: hue-rotate(270deg) contrast(125%);
}
@keyframes rot {
    to { transform: rotate(1turn); }
}
#vid {
    position: absolute;
    width: 120%;
    height: 120%;
    top:-100px;
    left:-301px;
    object-fit: cover;
    pointer-events: none;
    mix-blend-mode: screen;
    z-index:3;
    opacity: .46;
}
</style>

<div id="papa">
<video id="vid" src="https://img.tukuppt.com/video_show/2475824/00/02/05/5b4ffd401d669.mp4" autoplay="" loop="" muted=""></video>
    <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1370908141" autoplay loop></audio>
    <img class="play_pic" src="https://638183.freep.cn/638183/t23/btn/12f.png" alt="" />
    <img class="play_pic" src="https://638183.freep.cn/638183/t23/btn/12f.png" alt="" />
    <img id="iplay" class="play_pic" src="https://638183.freep.cn/638183/t23/btn/12f.png" alt="" />
</div><svg class="myfilter">    <filter id="turb" filterunits="objectBoundingBox" x="0" y="0" width="100%" height="100%">        <feturbulence id="feturbulence" type="fractalNoise" numoctaves="3" seed="2"></feturbulence>        <fedisplacementmap xchannelselector="G" ychannelselector="B" scale="20" in="SourceGraphic"></fedisplacementmap>    </filter></svg>

<script>(function() {
    let frames = 0, rad = Math.PI / 180;

let lrcAr = [
    [0.86,"单曲：因为遇见你-夏婉安 （无损版）",3.1],
    [3.98,"歌手：夏婉安",1.1],
    [5.03,"所属专辑：因为遇见你",1.0],
    [6.02,"作词 : willen",1.0],
    [7.04,"作曲 : willen",0.7],
    [7.72,"因为遇见你 - 夏婉安",0.6],
    [8.3,"编曲：willen",0.6],
    [8.94,"混音：willen",0.6],
    [15.06,"还在继续昨天的梦游",3.6],
    [19.01,"脑海里都是你",2.1],
    [22.65,"那恰好的不小心",1.9],
    [26.41,"你的笑让我着迷",2.2],
    [30.86,"缘起缘落缘来缘散几分天注定",5.1],
    [37.76,"从不相信命运的我一见钟情",4.2],
    [46.16,"以为自己像颗流星偏离了轨迹",5.1],
    [52.99,"没你的万有引力迷失在黑夜里",4.2],
    [61.34,"一言一笑每个动作都让我着迷",5.0],
    [68.24,"也许这就是天意美好的相遇",4.3],
    [75.49,"为什么这么轻易打开心锁",2.9],
    [79.1,"为什么连阴雨的天都晴",3.2],
    [82.99,"为什么心跳加速加快",2.1],
    [85.47,"为什么看到你会不知所措",2.7],
    [90.93,"我跋山涉水踏过千里万里",3.6],
    [95.14,"终于找到你",1.9],
    [98.8,"隐藏多少年的勇气",2.0],
    [101.18,"只想说给你听",1.5],
    [106.05,"我一次次的失眠辗转反侧",3.8],
    [110.39,"因为遇见你",1.9],
    [113.63,"那些属于自己的幸福",2.0],
    [116.32,"绝不会再失去",1.6],
    [118.09,"",18.7],
    [137.04,"以为自己像颗流星偏离了轨迹",6.2],
    [144.52,"没你的万有引力迷失在黑夜里",4.2],
    [153.04,"一言一笑每个动作都让我着迷",4.8],
    [159.72,"也许这就是天意美好的相遇",4.2],
    [167.06,"为什么这么轻易打开心锁",2.8],
    [170.69,"为什么连阴雨的天都晴",2.9],
    [174.45,"为什么心跳加速加快",2.1],
    [176.73,"为什么看到你会不知所措",2.9],
    [182.01,"我跋山涉水踏过千里万里",4.0],
    [186.53,"终于找到你",2.0],
    [190.21,"隐藏多少年的勇气",2.0],
    [192.56,"只想说给你听",1.6],
    [197.74,"我一次次的失眠辗转反侧",3.5],
    [201.73,"因为遇见你",2.0],
    [205.03,"那些属于自己的幸福",2.1],
    [207.72,"绝不会再失去",1.6],
    [213.06,"我跋山涉水踏过千里万里",3.4],
    [217.01,"终于找到你",1.9],
    [220.65,"隐藏多少年的勇气",2.1],
    [223.12,"只想说给你听",1.6],
    [228.02,"我一次次的失眠辗转反侧",3.7],
    [232.21,"因为遇见你",1.9],
    [235.5,"那些属于自己的幸福",2.0],
    [238.23,"绝不会再失去",1.6]
];
    let js1 = 'https://638183.freep.cn/638183/web/api/hc_lrc.js',
        js2 = 'https://638183.freep.cn/638183/web/lizi/h5lz_2d.js';
let loadJs = (url,callback) => {
    let body = document.querySelector('body'), jsNode = document.createElement('script');
    jsNode.charset = 'utf-8';
    jsNode.setAttribute('src', url);
    body.appendChild(jsNode);
    jsNode.onload = () => callback();
};

    loadJs(js1, () => {
    HCPlayer({
        papa: '#papa',
        lrcAr: lrcAr,
        lrc_css: 'bottom: 20px; --bg: linear-gradient(rgba(250,250,250,.25),rgba(100,200,250,.65)); color: #fff;',
    });
});
let fewave = () => {
        let bfx = 0.01, bfy = 0.1;
        frames += 0.5;
        bfx += 0.002 * Math.cos(frames * rad);
        bfy += 0.02 * Math.sin(frames * rad);
        bf = [bfx, bfy];
        feturbulence.setAttributeNS(null, 'baseFrequency',bf.join(' '));
        requestAnimationFrame(fewave);
    };

    fewave();

})();
setInterval( () => { aud.paused ? vid.pause() : vid.play(); },100);
</script>
<br><br><br><br><br>