醉美水芙蓉 发表于 2024-6-9 19:33:25

寻觅你的光

<style>
        #mydiv { margin: 30px 0 30px calc(50% - 681px); width: 1200px; height:700px; background: url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/live/c01ff7a55a1c070c8c33999b55add6f5.mp4.jpg') no-repeat center/cover; box-shadow: 2px 2px 6px rgba(0,0,0,.6); overflow: hidden; z-index: 1; user-select: none; position: relative; }
        .nvhai { position: absolute; right:-80px; top:200px; animation: ani 1.5s linear infinite alternate var(--state); }
        txt-box { position: absolute; display: grid; place-items: center; left: var(--xx); bottom: 450px;transform: rotate(10deg)；width: 70px; height: 70px; font: normal 46px sans-serif; color: LightSkyBlue; cursor: pointer; transition: .7s; animation: move .8s var(--delay) linear infinite alternate var(--state); }
        txt-box::after { position: absolute; content: ''; inset: -6px; border: thick outset SkyBlue; border-radius: 0 50%; animation: rot 5s var(--delay) linear infinite alternate var(--state); }
        txt-box:hover { filter: sepia(100%) drop-shadow(0 -80px 10px white); }
        .vid { position: absolute; object-fit: cover; }
      .vid:nth-of-type(1) { bottom: 0; width: 100%; height: calc(100% + 60px);mix-blend-mode: multiply; opacity: .95; pointer-events: none; }
      .vid:nth-of-type(2) { top: 262px; right: 10px; width: 320px; height: 160px; border-radius: 0 40% 0 0; transform: rotateY(180deg); mix-blend-mode: luminosity; cursor: pointer; filter: drop-shadow(0 0 10px GoldEnrod);transition: 2s; opacity: .25;}      
        @keyframes ani { from { transform: scale(.99); opacity: .2; } to { transform: scale(1.05); opacity: .9; } }       
        @keyframes move { to { bottom: 280px; } }
        @keyframes rot { to { transform: rotateX(360deg); } }
</style>

<div id="mydiv">
        <audio id="aud" src="https://file.uhsea.com/2406/c8bacc7fed93b64adeaf899850051010CL.mp3" autoplay loop></audio>
        <video class="vid" src="https://img.tukuppt.com/video_show/15653652/04/57/91/6490fef65a85f_10s_big.mp4" muted loop autoplay></video>
        <video class="vid" id="vbtn" src="" autoplay loop muted disablePictureinPicture></video>
        <img class="nvhai" alt="" src="https://www.bohann.net/data/attachment/forum/202306/13/200858johlfte47otr07f5.gif" />
</div>

<script>
(function() {
        const ar = '寻觅你的光'.split('');
        const total = ar.length, half = Math.floor(ar.length / 2), ww = 700;
        let tbAr = [];
        ar.forEach((t,k) => {
                let tbox = document.createElement('txt-box');
                tbox.textContent = t;
                tbox.style.cssText += `
                        --xx: ${ww / total * k + 180}px;
                        --delay: -${k < half ? k * 0.5 : (total - k) * 0.5}s;
                `;
                tbAr.push(tbox);
                mydiv.appendChild(tbox);
        });
        aud.onplaying = aud.onpause = () => {
                mydiv.style.setProperty('--state', ['running','paused'][+aud.paused]);
                aud.paused ? vid.pause() : vid.play();
                tbAr.forEach(tb => tb.title = ['暂停','播放'][+aud.paused]);
        };
        tbAr.forEach(tb => tb.onclick = () => aud.paused ? aud.play() : aud.pause());

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: '#mydiv',
                lrcAr: lrcAr,
                btn: '#mydiv',
                lrc_css: 'left: 460px; bottom: 50px; --bg: LightSkyBlue; color: LightSteelBlue; font:bold 2.4em serif;',
        });
};
mydiv.oncontextmenu = (e) => e.preventDefault();
const lrcAr= [
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];
})();
</script>

红尘过客 发表于 2024-6-15 00:58:56

这个作品漂亮！！！！

快播 发表于 2024-6-23 15:35:21

这个作品漂亮！！！！

活跃概况 发表于 2024-7-12 19:41:08

这个作品漂亮！！！！

蓝叶 发表于 2024-7-31 20:56:12

这个作品漂亮！！！！

肖浅 发表于 2024-8-8 03:39:21

这个作品漂亮！！！！

顶不顶个球 发表于 2024-8-13 23:49:43

这个作品漂亮！！！！

活跃概况 发表于 2024-8-19 12:24:48

这个作品漂亮！！！！

夏艳妍 发表于 2024-8-25 08:47:13

这个作品漂亮！！！！

顶不顶个球 发表于 2024-8-26 20:01:35

这个作品漂亮！！！！
页: [1] 2
查看完整版本: 寻觅你的光