亚洲之风
<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> 参考代码
<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>
特点在小播的 hover 交互，实现方法可参阅：
https://www.huachaowang.com/forum.php?mod=viewthread&tid=85048 这个有意思，把圆形的小播也这样变幼儿园积木了{:4_173:} 这个标题字没用转动字啊{:4_173:} 漂亮！谢谢马老师经典示范{:4_191:} 鼠标一碰小播就变成其他花形了。太赞了！{:4_187:} 梦江南 发表于 2025-7-29 17:44
鼠标一碰小播就变成其他花形了。太赞了！
{:4_190:} 杨帆 发表于 2025-7-29 14:45
漂亮！谢谢马老师经典示范
{:4_191:} 红影 发表于 2025-7-29 13:51
这个标题字没用转动字啊
不转动也挺好吧 红影 发表于 2025-7-29 13:50
这个有意思，把圆形的小播也这样变幼儿园积木了
有一定的可玩性 马黑黑 发表于 2025-7-29 18:27
不转动也挺好吧
是的，不转也好，这个主要是展示小播的变化的，省得文字喧宾夺主了{:4_204:} 马黑黑 发表于 2025-7-29 18:28
有一定的可玩性
非常有趣呢{:4_187:} 红影 发表于 2025-7-29 20:54
是的，不转也好，这个主要是展示小播的变化的，省得文字喧宾夺主了
觉得需要的就设计标题动画 红影 发表于 2025-7-29 20:55
非常有趣呢
{:4_191:} 马黑黑 发表于 2025-7-29 20:58
觉得需要的就设计标题动画
嗯嗯，带动态的也方便，黑黑有做好的例子。 马黑黑 发表于 2025-7-29 20:58
试看小播大变身。 红影 发表于 2025-7-29 22:15
试看小播大变身。
切割路径就是繁琐，得好好弄 红影 发表于 2025-7-29 22:15
嗯嗯，带动态的也方便，黑黑有做好的例子。
那几句代码也应该理解、记住了 飘逸！{:4_187:}