Club Gtr
<style>@import 'https://638183.freep.cn/638183/web/css/tz02.css';
#pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w5/gtr.webp') no-repeat center/cover; --ma-size: 15%; }
#ma { top: 20px; right: 30px; background: url('https://638183.freep.cn/638183/small/hh1.webp') no-repeat center/cover; filter: sepia(1); transition: .75s; }
#ma:hover { filter: unset; }
#btnFs { left: 30px; bottom: 30px; color: beige; border-color: currentColor!important; }
</style>
<div id="pa">
<audio id="audio" src="https://music.163.com/song/media/outer/url?id=2159401156" autoplay loop></audio>
<video class="pd-vid vid" src="https://img.tukuppt.com/video_show/2269348/00/14/17/5e1c8604a11da.mp4" autoplay loop muted></video>
<div id="ma">
<svg id="msvg" width="100%" height="100%" viewBox="-100 -100 200 200"></svg>
</div>
</div>
<script type="module">
import { FS } from 'https://638183.freep.cn/638183/web/js/fullscreen.js';
import Dr from 'https://638183.freep.cn/638183/web/mod/svgdr.js';
var dr = Dr.dr(msvg);
var tt = 10, path = 'M0 -30,-20 0,0 -95,20 0 Z';
Array.from({length: tt}).forEach((_,k) => {
dr.path(path, 'none', 'beige', 3).transform(`rotate(${360/tt*k})`);
});
FS(pa,ma);
</script> <div class="codebox" data-prev="1">
<style>
@import 'https://638183.freep.cn/638183/web/css/tz02.css';
#pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w5/gtr.webp') no-repeat center/cover; --ma-size: 15%; }
#ma { top: 20px; right: 30px; background: url('https://638183.freep.cn/638183/small/hh1.webp') no-repeat center/cover; filter: sepia(1); transition: .75s; }
#ma:hover { filter: unset; }
#btnFs { left: 30px; bottom: 30px; color: beige; border-color: currentColor!important; }
</style>
<div id="pa">
<audio id="audio" src="https://music.163.com/song/media/outer/url?id=2159401156" autoplay loop></audio>
<video class="pd-vid vid" src="https://img.tukuppt.com/video_show/2269348/00/14/17/5e1c8604a11da.mp4" autoplay loop muted></video>
<div id="ma">
<svg id="msvg" width="100%" height="100%" viewBox="-100 -100 200 200"></svg>
</div>
</div>
<script type="module">
import { FS } from 'https://638183.freep.cn/638183/web/js/fullscreen.js';
import Dr from 'https://638183.freep.cn/638183/web/mod/svgdr.js';
var dr = Dr.dr(msvg);
var tt = 10, path = 'M0 -30,-20 0,0 -95,20 0 Z';
Array.from({length: tt}).forEach((_,k) => {
dr.path(path, 'none', 'beige', 3).transform(`rotate(${360/tt*k})`);
});
FS(pa,ma);
</script>
</div>
<script type="module">
import linenumber from 'https://638183.freep.cn/638183/web/js/linenumber.js';
linenumber();
</script> tz02.css 和此前一直使用的 tz01.css 没有本质区别，仅在实现 16/9 的宽高比层面，02不适用 aspect-ratio 属性，直接通过 calc 函数计算。 好漂亮的油菜花，这个小播放也好看。欣赏黑黑老师的精彩分享！{:4_187:} 马黑黑 发表于 2025-8-29 07:41
tz02.css 和此前一直使用的 tz01.css 没有本质区别，仅在实现 16/9 的宽高比层面，02不适用 aspect-ratio...
这个昨天看了例子，今天封起来了。。{:4_199:}
看了封包数据
width: clamp(600px, 95vw, 1440px);
height: clamp(337px, 50vw, 810px)
最小的是600，这更适用于手机页面吧。。 一大早看到这么阳光灿烂的作品真是心情大好，
小播也是画的箭头形四边形，转了10次组合起来。
这次还给了个图片背景，色彩与背景搭配起来特别好看。
音乐好听，轻柔又有力。。 花飞飞 发表于 2025-8-29 09:25
一大早看到这么阳光灿烂的作品真是心情大好，
小播也是画的箭头形四边形，转了10次组合起来。
这次还给了 ...
{:4_190:} 花飞飞 发表于 2025-8-29 09:22
这个昨天看了例子，今天封起来了。。
看了封包数据
width: clamp(600px, 95vw, 1440px);
手机的物理像素其实也挺复杂。我这是在虚拟设备那里做的测算，应该八九不离十了吧 梦江南 发表于 2025-8-29 07:44
好漂亮的油菜花，这个小播放也好看。欣赏黑黑老师的精彩分享！
{:4_190:} 绚丽效果，学生已交作业{:4_190:} 朵拉 发表于 2025-8-29 12:29
绚丽效果，学生已交作业
{:4_199:} 又是新的封装呢，黑黑的设计做得太细致了{:4_199:} 小播也好漂亮，有图图还有绘制的图图，结合到一起好美。
音乐也极好听{:4_199:} 红影 发表于 2025-8-29 12:40
又是新的封装呢，黑黑的设计做得太细致了
02是在01基础上改了少量几行代码而已 红影 发表于 2025-8-29 12:41
小播也好漂亮，有图图还有绘制的图图，结合到一起好美。
音乐也极好听
谢美 马黑黑 发表于 2025-8-29 12:27
一杯忘情水{:4_173:} 马黑黑 发表于 2025-8-29 12:28
手机的物理像素其实也挺复杂。我这是在虚拟设备那里做的测算，应该八九不离十了吧
手机完美显示，现在不是果机。现在显示的比之前更宽大一些，当然也是全的 花飞飞 发表于 2025-8-29 20:19
手机完美显示，现在不是果机。现在显示的比之前更宽大一些，当然也是全的
可以吧 花飞飞 发表于 2025-8-29 20:18
一杯忘情水
好水 马黑黑 发表于 2025-8-29 20:20
可以吧
把最后一个字去掉，不是一般的可以{:4_173:}