小辣椒 发表于 2023-12-26 22:31

我怕的不是冷（Live 合唱版）-艺凌 TO：小风

<style>
#papa {
        margin: 150px 0 0 calc(50% - 881px);
        display: grid;
        place-items: center;
        width: 1600px;
        height: 900px;               
        background: lightblue url('https://xlaj.cn/assets/file/zp/20231223024747.jpg') no-repeat center/cover;
        box-shadow: 3px 3px 20px #000;
               position: relative;
                z-index: 1;
               overflow: hidden;
             --state: running;            
}

#vid {
    position: absolute;
    width: 100%;
    height: 120%;
    object-fit: cover;
    pointer-events: none;
    mix-blend-mode: screen;
    z-index: 2;
    opacity: .50;
}
.play_pic {
        position: absolute;
        cursor: pointer;
         
}
.play_pic:nth-of-type(1) {
        width: 280px;
                left: 150px;top:570px;
        opacity: .9;
        transform: rotate(360deg);
        transition: 1.5s;
}
.play_pic:nth-of-type(2) {
        width: 300px;
        bottom: 20px;
        right: 20px;
        animation: rot 10s infinite var(--state);
}
.play_pic:nth-of-type(1):hover { opacity: 0; }
@keyframes rot {
        to { transform: rotate(1turn); }
#dt2{ position: absolute; width:102px; height:20px; top: 180px; left: 150px; }
#dt3{ position: absolute; width:102px; height:20px; top: 280px; left: 150px; }

</style>
<div id="papa">
        <audio id="aud" src="https://aod.cos.tx.xmcdn.com/storages/281a-audiofreehighqps/78/34/GMCoOSQJV9nSACAAAAKPCMpE.m4a" autoplay loop></audio>
        <img class="play_pic" src="https://xlaj.cn/assets/file/zp/20231223025513.svg" alt="" />
        <img class="play_pic" src="https://xlaj.cn/assets/file/zp/20231223024855.svg" alt="" />

<img id="dt2" src="https://xlaj.cn/assets/file/zp/20231223024723.gif" alt="" />
<video id="vid" src="https://img.tukuppt.com/video_show/2475824/00/01/59/5b46b86e6c5bf.mp4" autoplay="" loop="" muted="">
</div>
<script>
let lrcAr = [
      ,
      ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];

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('https://638183.freep.cn/638183/web/api/hc_lrc.js', () => {
        HCPlayer({
                papa: '#papa',
                lrcAr: lrcAr,
                lrc_css: 'bottom: 8%; left:45%;font-size: 2.2em;--bg: linear-gradient(rgba(135,206,250,.4),rgba(135,206,250,.7)); color: Lavender;',
        });
});

for(i = 0; i < 5; i++) {
        let img = document.createElement('img');
        img.className = 'play_pic';
        img.alt = '';
        img.src = 'https://xlaj.cn/assets/file/zp/20231223024836.svg';
        img.style.cssText += `
        right: ${i * 250 + 250}px;
      top:50px;      
                width: ${i * 120 * 0.2 + 120 * 0.6}px;
                height: ${i * 220 * 0.2 + 220 * 0.6}px;
                filter: opacity(${Math.random() * 0.2 + 0.8}) hue-rotate(${Math.random() * 360}deg);
                animation: rot ${Math.random() * 6 + 4}s ${Math.random() * -3}s infinite linear var(--state);
        `;
        papa.appendChild(img);
}
setInterval( () => { aud.paused ? vid.pause() : vid.play(); },100);
</script>
<br><br><br><br><br>

小辣椒 发表于 2023-12-26 22:51

同一首完成

bgmnet 发表于 2023-12-27 04:12

哇塞，，真的很哇塞，爱了爱了{:5_140:}{:5_140:}

liumang 发表于 2023-12-28 13:26

bgmnet 发表于 2023-12-27 04:12
哇塞，，真的很哇塞，爱了爱了

我也爱了爱了:lol
页: [1]
查看完整版本: 我怕的不是冷（Live 合唱版）-艺凌 TO：小风