醉美水芙蓉 发表于 2024-11-24 21:17:46

枉凝眉 - 陈力

<style>
        @import 'https://638183.freep.cn/638183/web/css/audlrc.css';
        #mama { margin: 60px 0 30px calc(50% - 721px); width: 1280px; height: 720px; background: black url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/scene/e4a3ecb476d462616b055d5c6fa98564_preview.jpg')no-repeat center/ cover; overflow: hidden; }
        #player { width: 100px; height: 100px; opacity: .95;bottom: 10%; right:1%; animation: flash 4s linear infinite var(--state), rot 8s linear infinite var(--state); }
        #player:hover { filter: hue-rotate(30deg); transition: .7s; }
        #prog { bottom: 30px; right: 1%; width: 100px; --bg1: #fcddfd; --bg2: #eb84ea; --color: #fcddfd; }
        #prog::before { width: 100%; height: 40px; left: 0; top: -30px; }
        #lrc { bottom: 30%; right:3%; color: #fcddfd; --bg: linear-gradient(rgba(195,126,236,.25),rgba(195,126,236,.75)); font: bold 2.4em KaiTi; writing-mode:vertical-rl; }
        #vid { position: absolute; bottom: -60px;width: 110%; height: calc(100% + 100px);object-fit: cover;-webkit-mask: radial-gradient(red 50%, transparent 70%); pointer-events: none; }
        #fsbtn { position: absolute; top: 62%; left: 3%; color: LightSkyBlue; padding: 2px 6px; border: 2px solid LightSkyBlue; border-radius: 8px; user-select: none; cursor: pointer; transition: .5s; }
        #tit { position: absolute; width:80px; height:720px; top: 5%;left: 1.5%; font: bold 3.4em LiSu; color: transparent; background-image: linear-gradient(180deg, Pink, Cyan, transparent, SkyBlue, tomato, Pink); background-size: 100px 500px; background-position: 0px 500px; border: 1px solid; writing-mode:vertical-rl; -webkit-background-clip:text; animation: wenzi 2s linear infinite alternate var(--state); }
        #lrc::before { width: 100%; height: 20%; }
        @keyframes cover1 { from { height: 0; } to { height: 100%; } }
        @keyframes cover2{ from { height: 0; } to { height: 100%; } }
        @keyframes wenzi { from { background-position: 0px -500px; } to { background-position: 0 0; }}
        @keyframes flash { to { filter: hue-rotate(360deg); } }
</style>

<div id="mama" class="pa">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=159401"></audio>
        <video id="vid" src="https://link.hhtjim.com/163/159401.mp4" autoplayloop muted></video>
        <div id="tit">枉凝眉 - 陈力</div>
        <span id="fsbtn"></span>
        <div id="lrc" class="lrc" data-lrc="HCPlayer">HCPlayer</div>
        <img id="player" class="player" src="https://file.uhsea.com/2411/142fe62aa86ddbeb41fa6fb81c3a06d09V.png" alt="" />
        <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';
        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');
</script>

klxf 发表于 2024-11-24 21:46:00

布局、视频、效果惊艳，谢谢醉美管理员精彩分享:)

醉美水芙蓉 发表于 2024-11-25 11:39:40

klxf 发表于 2024-11-24 21:46
布局、视频、效果惊艳，谢谢醉美管理员精彩分享

谢谢友友支持光临支持！

落寞 发表于 2024-11-27 14:09:25

感谢您的无私精神...

落寞 发表于 2024-11-28 16:54:48

前来支持~~~~~~~~~~~~~~~~~~~

蓝叶 发表于 2024-11-30 07:44:14

谢谢楼主的辛苦分享

顶不顶个球 发表于 2024-12-3 16:51:16

很不错的哦，支持，加油

夏艳妍 发表于 2024-12-5 20:47:03

谢谢楼主的辛苦分享

肖浅 发表于 2024-12-6 00:00:04

不错！顶LZ

落寞 发表于 2024-12-6 00:30:42

必须支持。。。。。。。
页: [1] 2
查看完整版本: 枉凝眉 - 陈力