醉美水芙蓉 发表于 2024-11-29 22:06:24

蝶在飞

<style>
        @import 'https://638183.freep.cn/638183/web/css/audlrc.css';
        #mama { margin: 30px 0 30px calc(50% - 681px); width: 1200px; height: 720px; background: black url('https://pic.imgdb.cn/item/6749c758d0e0a243d4db4822.png') no-repeat center/ cover; }
        #player { cursor: pointer; transition: .7s; animation: flash .5s linear infinite var(--state); }
        #player:hover { opacity: .6; }
        #prog { bottom: 20px;width: 280px; --bg1: white; --bg2: lightblue; --color: white; }
        #prog::before { width: 100%; height: 40px; left: 0; top: -30px; }
        #lrc { top: 30px; color: lightblue; --bg: linear-gradient(rgba(0,250,250,.05),rgba(0,250,250,.75)); }
        #vid { position: absolute; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: screen; -webkit-mask: radial-gradient(transparent 20%, red); pointer-events: none; }
        svg { position: absolute; }
        #fsbtn { position: absolute; bottom: 20px; right:30%; color: lightblue; padding: 2px 6px; border: 2px solid lightblue; border-radius: 8px; user-select: none; cursor: pointer; transition: .5s; z-index: 9; }
        use { transform-box: fill-box; transform-origin: center; animation: move var(--dur) var(--delay) linear infinite var(--state); }
        @keyframes move { to { transform: rotate(var(--deg)) translate(var(--xx)); } }
        @keyframes flash { to { filter: hue-rotate(360deg); } }
</style>

<div id="mama" class="pa">
        <audio id="aud" src="https://www.joy127.com/url/117853.mp3"></audio>
        <video id="vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/03/02/45/46/video6362bada8cb97.mp4" autoplay loop muted></video>
        <span id="fsbtn" class="fsbtn"></span>
        <svg id="msvg" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"></svg>
        <div id="lrc" class="lrc" data-lrc="HCPlayer">HCPlayer</div>
        <div id="prog" class="prog" data-tt="00:00 00:00"></div>
</div>

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

var dr = Dr.dr('msvg');
dr.symbol('sy1', '-200 -200 400 400');
dr.path('M0 -100 C350 -300,100 0,0 180 C-100 0,-350 -300,0 -100', 'fuchsia').addTo('sy1');
var all = 20;
Array.from({length: all}).forEach(() => {
        var size= Math.random() * 30 + 20;
        dr.use('sy1', -100, 100, size, size).style(`filter: hue-rotate(${360 * Math.random()}deg); --delay: ${Math.random() * -12}s; --dur: ${Math.random() * 8 + 10}s; --deg: ${100 - Math.random() * 120}deg;`);
});
dr.use('#sy1', 550, 580, 100, 100).id('player');

var lrcAr = [
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];
var mDatas = { pa: mama, btn: player, prog: prog, lrc: lrc, lrcAr: lrcAr };
var audio = new Aud(mDatas);
audio.play();
fscreen.fs('mama', 'fsbtn');
var resizeObserver = new ResizeObserver(() => {
        msvg.style.setProperty('--xx', mama.clientWidth + 100 + 'px');
        dr.sets({x: mama.clientWidth / 2 - 50, y: mama.clientHeight - 140});
});
resizeObserver.observe(mama);
</script>

klxf 发表于 2024-11-30 01:01:30

好听好看，谢谢醉美管理员精彩分享:)

醉美水芙蓉 发表于 2024-11-30 07:02:49

klxf 发表于 2024-11-30 01:01
好听好看，谢谢醉美管理员精彩分享

谢谢友友支持！
页: [1]
查看完整版本: 蝶在飞