亚洲之风

马黑黑 · 发表于 2025-7-29 13:25

您需要登录才可以下载或查看，没有账号？立即注册

x

亞洲之風

马黑黑 · 发表于 2025-7-29 13:25

参考代码

<style>
@import 'https://638183.freep.cn/638183/web/css/tz01.css';
#pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w4/yvvf.webp') no-repeat center/cover; --ma-size: 20%; }
#ma::before, #ma::after { position: absolute; content: ''; left: 0; top: 0; width: 100%; height: 100%; background: url('https://638183.freep.cn/638183/small/2025/fl101.png') no-repeat center/cover; border-radius: inherit; clip-path: polygon(0 0,0 100%,100% 100%); transition: 2s; }
#ma::after { left: -1px; width: calc(100% + 1px); height: calc(100% + 1px); clip-path: polygon(0 0,100% 0,100% 100%); }
#ma:hover::before { clip-path: polygon(0 0,50% 50%,100% 0); }
#ma:hover::after { clip-path: polygon(50% 50%,0 100%,100% 100%); }
#btnFs { bottom: 20px; color: #eee; }
.title-text { right: 20px; top: 30px; font-size: 30px; writing-mode: vertical-rl; }
</style>
<div id="pa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=586887" autoplay loop></audio>
<video class="pd-vid" src="https://img.tukuppt.com/video_show/15653652/01/33/69/62f0d6e506540.mp4" autoplay loop muted></video>
<div class="title-text">亞洲之風</div>
<div id="ma" class="sepia"></div>
</div>
<script type="module">
import { FS } from 'https://638183.freep.cn/638183/web/js/fullscreen.js';
FS(pa, ma);
</script>