醉美水芙蓉 发表于 2024-12-20 22:36:18

冬至


<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/scene/3a30270d914eb29d2eb02b4117e54b38_preview.jpg') no-repeat center/cover; }
        #player { position: absolute; width:400px; height: 400px; clip-path: polygon(50% 0%, 100% 25%, 100% 85%, 50% 100%, 0% 85%, 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://music.163.com/song/media/outer/url?id=1410831831"></audio>
        <div id="player"><img id="mypic" src="https://638183.freep.cn/638183/t24/webp3/t1.webp" 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://bbs.cnzv.cc/up/upload/pic/12/20241220-e321984229386ddb1753b6b79cc59821.jpg',
        'https://bbs.cnzv.cc/up/upload/pic/12/20241220-ad038f13eba979337356bf97d24713cc.jpg',
        'https://bbs.cnzv.cc/up/upload/pic/12/20241220-817094575a88bd10436a84e767659b1a.jpg',
        'https://bbs.cnzv.cc/up/upload/pic/12/20241220-7931bd25cceac65d5f7b5ecf50d057a6.jpg',
                'https://bbs.cnzv.cc/up/upload/pic/12/20241220-0c9470b5e4d87775d71bbac1b166324e.jpg',
'https://bbs.cnzv.cc/up/upload/pic/12/20241220-c716c01364fbffbca1f6ed41c7294bc9.jpg',
'https://bbs.cnzv.cc/up/upload/pic/12/20241220-bcf35d16dea4dfdf9866b08e7d229142.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-20 23:42:26

漂亮！很应景哇，祝冬至快乐:)

醉美水芙蓉 发表于 2024-12-21 11:59:07

klxf 发表于 2024-12-20 23:42
漂亮！很应景哇，祝冬至快乐

谢谢友友支持！祝冬至快乐！

确认过眼神 发表于 2024-12-26 11:59:18

顶一个了
页: [1]
查看完整版本: 冬至