醉美水芙蓉 发表于 2024-12-16 20:43:21

远山上挂月亮

<style>
        @import 'https://638183.freep.cn/638183/web/mod/aud_lrc.css';
        #tz { --state: running; margin: 30px 0 30px calc(50% - 721px); width: 1280px; height: 720px; background: url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/live/52b24c490c3eb9ec138d7b6dfcfb3b40.mp4.jpg') no-repeat center/cover; }
        #player { position: absolute; width: 400px; height: 400px; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); background: rgba(0,0,128,.05); cursor: pointer; display: grid; place-items: center; }
        #mypic { width: 100%; height: 100%; opacity: .75; }
        #prog { bottom: 30px; width: 280px; --bg1: silver; --bg2: lightblue; --color: lightblue; }
        #lrc { top: 30px; }
        #fsbtn { bottom: 60px; }
        @keyframes in1 {
                0% { width: 0; height: 0; transform: rotate(0); }
                60% { width: 100%; height: 100%; transform: rotate(-720deg) }
                90% { width: 100%; height: 100%; transform: rotate(-720deg); }
                100% { width: 0; height: 0; transform: rotate(0); }
        }
        @keyframes in2 {
                0% { width: 0; height: 0; transform: rotate(0); }
                60% { width: 100%; height: 100%; transform: rotate(720deg) }
                90% { width: 100%; height: 100%; transform: rotate(720deg); }
                100% { width: 0; height: 0; transform: rotate(0); }
        }
</style>

<div id="tz" class="pa">
        <audio id="aud" src="https://www.joy127.com/url/118558.mp3"></audio>
        <div id="player"><img id="mypic" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/scene/b33331857b459d2a35c52cf01aeeaa35_preview.jpg" alt="" /></div>
        <div id="lrc" class="lrc" data-lrc="HCPlayer">HCPlayer</div>
        <div id="prog" class="prog" data-tt="00:00 00:00"></div>
        <div id="fsbtn" class="fsbtn"></div>
</div>

<script type="module">
import { Aud } from 'https://638183.freep.cn/638183/web/mod/aud_lrc.js';
import fscreen from 'https://638183.freep.cn/638183/web/mod/fscreen.js';

var lrcAr = [
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];

var audio = new Aud(tz, player, lrcAr);
audio.play();
fscreen.fs(tz, fsbtn);

var picIdx = 0, gapTime = 10000, anis = ['in1', 'in2'];

var picAr = [
        'https://img-baofun.zhhainiao.com/pcwallpaper_ugc/scene/6c21342fdac53e24b3bb9f5e8a5c082c_preview.jpg',
        'https://img-baofun.zhhainiao.com/fs/scene/preview_img_raw/6d0cd097c963bb4dff31af8bf966bc95_preview_raw.jpg',
        'https://img-baofun.zhhainiao.com/pcwallpaper_ugc/scene/e1742704e9b5d4491f096995a5747cd9_preview.jpg',
        'https://img-baofun.zhhainiao.com/fs/scene/preview_img_raw/73b5b268834ae540aefa4430abd17d58_preview_raw.jpg',
];

var showPics = (pics) => {
        mypic.src = pics;
        mypic.style.animation = `${anis} ${gapTime}ms forwards var(--state)`;
        picIdx = (picIdx + 1) % pics.length;
};

setInterval( () => {
        if(!aud.paused) showPics(picAr);
}, gapTime);

showPics(picAr);
</script>

klxf 发表于 2024-12-16 22:08:01

视听盛宴，饕餮大餐，谢谢醉美管理员精彩分享:)

醉美水芙蓉 发表于 2024-12-17 16:48:20

klxf 发表于 2024-12-16 22:08
视听盛宴，饕餮大餐，谢谢醉美管理员精彩分享

谢谢友友支持！

快播 发表于 2024-12-26 11:59:18

抢楼了，前排第一次啊
页: [1]
查看完整版本: 远山上挂月亮