笼
<style>@import 'https://638183.freep.cn/638183/web/mod/path_lrc.css';
#tz { --state: running; margin: 30px 0 30px calc(50% - 593px); background: url('https://638183.freep.cn/638183/t24/webp3/long.webp') no-repeat center/cover; }
#fsbtn { left: 15px; bottom: 20px; }
#mplayer { width: 200px; height: 170px; right: 100px; bottom: 10px; storke-linecap: round; stroke-linejoin: round; --path: M10 100 L100 5 L190 100 A90 60 0 1 1 10 100; --yy: 60; --track: lightblue; --prog: snow; }
#lrc { top: 20px; color: lightblue; --bg: linear-gradient(rgba(0,0,0,.15), rgba(0,0,128,.45)); }
</style>
<div id="tz" class="pa">
<audio src="https://dlink.host/musics/aHR0cHM6Ly9vbmVkcnYtbXkuc2hhcmVwb2ludC5jb20vOnU6L2cvcGVyc29uYWwvc3Rvcl9vbmVkcnZfb25taWNyb3NvZnRfY29tL0VWTjdFODIxYXJaTXU4bzY3am8yRGNZQnRDQ0I5empjNURIeFJlVjVBYWpPT2c.mp3"></audio>
<video class="vid" src="https://bpic.588ku.com/video_listen/588ku_video/23/07/11/17/09/58/video64ad1c6693b2e.mp4" autoplay loop muted></video>
<div id="lrc" class="lrc" data-lrc="HCPlayer">HCPlayer</div>
<div id="fsbtn" class="fsbtn"></div>
</div>
<script type="module">
import { hcplay } from 'https://638183.freep.cn/638183/web/mod/path_lrc.js?v=1.0';
import fscreen from 'https://638183.freep.cn/638183/web/mod/fscreen.js';
var lrcAr = [,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,];
hcplay(tz, lrcAr);
fscreen.fs(tz, fsbtn);
</script> <h2>帖子代码</h2>
<div id="hEdiv"><pre id="hEpre">
<style>
@import 'https://638183.freep.cn/638183/web/mod/path_lrc.css';
#tz { --state: running; margin: 30px 0 30px calc(50% - 593px); background: url('https://638183.freep.cn/638183/t24/webp3/long.webp') no-repeat center/cover; }
#fsbtn { left: 15px; bottom: 20px; }
#mplayer { width: 200px; height: 170px; right: 100px; bottom: 10px; storke-linecap: round; stroke-linejoin: round; --path: M10 100 L100 5 L190 100 A90 60 0 1 1 10 100; --yy: 60; --track: lightblue; --prog: snow; }
#lrc { top: 20px; color: lightblue; --bg: linear-gradient(rgba(0,0,0,.15), rgba(0,0,128,.45)); }
</style>
<div id="tz" class="pa">
<audio src="https://dlink.host/musics/aHR0cHM6Ly9vbmVkcnYtbXkuc2hhcmVwb2ludC5jb20vOnU6L2cvcGVyc29uYWwvc3Rvcl9vbmVkcnZfb25taWNyb3NvZnRfY29tL0VWTjdFODIxYXJaTXU4bzY3am8yRGNZQnRDQ0I5empjNURIeFJlVjVBYWpPT2c.mp3"></audio>
<video class="vid" src="https://bpic.588ku.com/video_listen/588ku_video/23/07/11/17/09/58/video64ad1c6693b2e.mp4" autoplay loop muted></video>
<div id="lrc" class="lrc" data-lrc="HCPlayer">HCPlayer</div>
<div id="fsbtn" class="fsbtn"></div>
</div>
<script type="module">
import { hcplay } from 'https://638183.freep.cn/638183/web/mod/path_lrc.js?v=1.0';
import fscreen from 'https://638183.freep.cn/638183/web/mod/fscreen.js';
var lrcAr = [,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,];
hcplay(tz, lrcAr);
fscreen.fs(tz, fsbtn);
</script>
</pre></div>
<script type="module">
import hlight from 'https://638183.freep.cn/638183/web/mod/helight.js';
hlight.hl(hEdiv, hEpre);
</script>
音乐为电影《消失的她》片尾曲 电影《消失的她》的片尾曲很好听耶，谢谢老师精彩分享{:4_191:} 能让米女的小嘴动起来吗。尽管歌声动听。{:4_189:} 这特效真的像铁丝网网住了美女。歌曲与背景很般配。好听！ 这播放器路径漂亮，和视频的丝网很相配，天设地造的一般。
欣赏黑黑好帖{:4_199:} 这个圆弧套到两段直线上，有趣。 x半径是200两边更扣掉10还剩180，除以2是90比较好理解，y半径如考虑170两边各减5剩160，除以2应该是80，看到取了60 。不过这个取值也没关系，只是圆弧平缓点而已的事。{:4_173:} storke-linecap: round; stroke-linejoin: round;
还使用了线端帽和转角的圆弧，这个两个倒是趁机复习一下呢{:4_187:} 红影 发表于 2024-12-26 14:52
storke-linecap: round; stroke-linejoin: round;
还使用了线端帽和转角的圆弧，这个两个倒是趁机复习一下 ...
放在CSS里，Chromium内核的浏览器没问题，Firefox不认 杨帆 发表于 2024-12-26 13:28
电影《消失的她》的片尾曲很好听耶，谢谢老师精彩分享
{:4_191:} 樵歌 发表于 2024-12-26 13:49
能让米女的小嘴动起来吗。尽管歌声动听。
AI可以，不过很机械 梦江南 发表于 2024-12-26 14:05
这特效真的像铁丝网网住了美女。歌曲与背景很般配。好听！
感谢支持 红影 发表于 2024-12-26 14:20
这播放器路径漂亮，和视频的丝网很相配，天设地造的一般。
欣赏黑黑好帖
果酱果酱，简简单单的制作而已 红影 发表于 2024-12-26 14:50
这个圆弧套到两段直线上，有趣。 x半径是200两边更扣掉10还剩180，除以2是90比较好理解，y半径如考虑170两 ...
椭圆弧的半径在有效范围内根据需要设定XY轴半径，没有固定规则 马黑黑 发表于 2024-12-26 18:53
AI可以，不过很机械
哈哈，真的吗。我哪天喊豆包做一个试试。{:4_189:} 樵歌 发表于 2024-12-26 19:14
哈哈，真的吗。我哪天喊豆包做一个试试。
现在很多人都做米人自娱自乐，我觉得好浪费时间 欣赏！问好{:4_191:} 小文 发表于 2024-12-26 19:37
欣赏！问好
晚上好！ 欣赏欣赏