Still（改变帖子宽高比演示）
本帖最后由 马黑黑 于 2025-8-30 12:11 编辑 <br /><br /><style>@import 'https://638183.freep.cn/638183/web/css/tz01.css';
#pa { aspect-ratio: 3/2; z-index: 1000; --bg: url('https://638183.freep.cn/638183/t24/w5/still.webp') no-repeat center/cover; --ma-size: 20%; --offsetX: 81px; }
#btnFs { right: 30px; top: 30px; color: #eee; }
</style>
<div id="pa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=30375354" autoplay loop></audio>
<video class="pd-vid" src="https://img.tukuppt.com/video_show/15653652/00/30/01/5fa35f70c94d7.mp4" autoplay loop muted></video>
<div id="ma" class="sepia"><svg id="msvg" width="100%" height="100%" viewBox="-200 -200 400 400"></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 d = 'M0 0 L-40 -190 Q0 -20,40 -190 L0 0';
var tt = 5;
Array.from({length: tt}).forEach((_,k) => dr.path(d, 'snow', 'beige', 4).transform(`rotate(${360/tt*k})`));
dr.circle(0, 0, 100, 'none', 'snow', 20).style('opacity: 0.6;');
FS(pa, ma);
</script> 本帖最后由 马黑黑 于 2025-8-30 12:11 编辑 <br /><br /><div class="codebox">
<style>
@import 'https://638183.freep.cn/638183/web/css/tz01.css';
#pa { aspect-ratio: 3/2; z-index: 1000; --bg: url('https://638183.freep.cn/638183/t24/w5/still.webp') no-repeat center/cover; --ma-size: 20%; --offsetX: 81px; }
#btnFs { right: 30px; top: 30px; color: #eee; }
</style>
<div id="pa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=30375354" autoplay loop></audio>
<video class="pd-vid" src="https://img.tukuppt.com/video_show/15653652/00/30/01/5fa35f70c94d7.mp4" autoplay loop muted></video>
<div id="ma" class="sepia"><svg id="msvg" width="100%" height="100%" viewBox="-200 -200 400 400"></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 d = 'M0 0 L-40 -190 Q0 -20,40 -190 L0 0';
var tt = 5;
Array.from({length: tt}).forEach((_,k) => dr.path(d, 'snow', 'beige', 4).transform(`rotate(${360/tt*k})`));
dr.circle(0, 0, 100, 'none', 'snow', 20).style('opacity: 0.6;');
FS(pa, ma);
</script>
</div>
<script type="module">
import linenumber from 'https://638183.freep.cn/638183/web/js/linenumber.js';
linenumber();
</script> 核心在第 3 行代码：
#pa { aspect-ratio: 3/2; z-index: 1000; --bg: url('https://638183.freep.cn/638183/t24/w5/still.webp') no-repeat center/cover; --ma-size: 20%; --offsetX: 81px; }
这是根据图片的比例做的调整。这个设定，在常规显示模式下，图片得以以实际宽高比例呈现；在全屏模式下则只能屈服于显示设备的宽高比、全屏API的工作机制和相关 background-size 设置。
马黑黑 发表于 2025-8-30 09:01
核心在第 3 行代码：
#pa { aspect-ratio: 3/2; z-index: 1000; --bg: url('https://638183.fre ...
aspect-ratio: 3/2这个好，面熟。。
之前的贴子里常常有用到，配了宽的设置width: clamp(600px, 90vw, 1700px);，高度自动height: auto;
现在是宽度在封装里面600——1400，按3/2得出高度。
试着把它改为17/9，图片下方按比例裁掉一些，图片会窄一点 中间的小播是个组合图片，除了5个鱼形旋转组合图案外，还给了个圆形做底座。
r = 20;这个的作用没看懂，跟后面圆里跟的20有木有关系呀 这次的鼠标触碰效果不太明显，几乎看不出来有啥变化。音乐清脆柔和，好听 花飞飞 发表于 2025-8-30 11:34
这次的鼠标触碰效果不太明显，几乎看不出来有啥变化。音乐清脆柔和，好听
不用太明显 花飞飞 发表于 2025-8-30 11:24
中间的小播是个组合图片，除了5个鱼形旋转组合图案外，还给了个圆形做底座。
r = 20;这个的作用没看懂，跟 ...
r 变量时为画圆使用的：开始设计的时候是画多个圆，每一个圆的半径根据迭代乘上k，后面觉得一个够了，就单独在后面后，r 变量就变成了多余变量 花飞飞 发表于 2025-8-30 11:14
aspect-ratio: 3/2这个好，面熟。。
之前的贴子里常常有用到，配了宽的设置width: clamp(600px, 90vw, 1 ...
其实一切考虑是根据图片而定 又一种宽高比，这个比例的图图高度更大点呢{:4_187:} 看到以这个比例显示的图片，进入全屏时，上下被隐去部分，和前面那个比例设置正好相反呢。 红影 发表于 2025-8-30 13:47
看到以这个比例显示的图片，进入全屏时，上下被隐去部分，和前面那个比例设置正好相反呢。
这可以看出 一些道理了吧 红影 发表于 2025-8-30 13:45
又一种宽高比，这个比例的图图高度更大点呢
这是为了适配不同比例图片的演示 马黑黑 发表于 2025-8-30 14:19
这可以看出 一些道理了吧
是的，这样比较学习更有收获{:4_187:} 马黑黑 发表于 2025-8-30 14:19
这是为了适配不同比例图片的演示
嗯嗯，使用不同的图图，就要用相应的比例去演示才好。 马黑黑 发表于 2025-8-30 12:08
不用太明显
这也算是一种变化 马黑黑 发表于 2025-8-30 12:10
r 变量时为画圆使用的：开始设计的时候是画多个圆，每一个圆的半径根据迭代乘上k，后面觉得一个够了，就 ...
明白了。。原来也打算整个公式的。。那就有许多同心圆了。。
其实跟后面的20没关系，才发现那里是线宽。 马黑黑 发表于 2025-8-30 12:10
其实一切考虑是根据图片而定
根据背景大小灵活选用。。
这几种对比后理解更深了 花飞飞 发表于 2025-8-30 17:23
根据背景大小灵活选用。。
这几种对比后理解更深了
{:4_181:} 花飞飞 发表于 2025-8-30 17:22
明白了。。原来也打算整个公式的。。那就有许多同心圆了。。
其实跟后面的20没关系，才发现那里是线宽。
{:4_181:}