远野（测试clamp设置16比9分辨率）

马黑黑

红影 发表于 2025-8-28 20:16
也就是说，宽度在最小值800和最大值1440之间的时候，直接使用100vm，宽度全屏的数值，高度用16:9 得到高度 ...

全屏基本不受这些设置所影响，它自有一套机制（不过和背景的设置有些关系）

马黑黑

小辣椒 发表于 2025-8-28 22:09
我用了个图测试效果不错，中间的粒子我加多了数量，效果很好

可以多加点，不过要考虑资源消耗，太多，移动端可能顶不住

雨中悄然

太好了，这个感觉有点面熟。。这一组贴子里常常出现的。
width: clamp(600px, 90vw, 1700px); height: auto;
这是为了自适应小设备而设的，自打有了它之后，小屏手机看贴子全部都能看全了。。很完美。。

今天是用这个特性来强制设置为16：9我来仔细看看

雨中悄然

先是看到left: calc(50% - var(--offsetX));这个是自动偏移量为啥设成变量了？
之前贴子很干脆，第一句就是--offsetX: 81px;

现在看到最后一行的了--offsetX: 81px;，这就跟之前计算论坛居中数据一样，每个坛子和网站都有不一样的数值。要么是0，要么是101.
只是多了用变量表示。

雨中悄然

马黑黑 发表于 2025-8-28 12:45
只是尝试一下不使用 aspect-ratio 属性强制 16:9 的其它实现方式。这里使用的是 clamp 属性，它是酱紫：

...

结合这楼的说明，来理解这两句代码，width: clamp(800px, 100vw, 1440px);height: clamp(450px, 56.25vw, 810px);
前后是最大最小值 。。。大于800小于1440用。中间的100VW满屏占满100。。。。
高度用的也是宽的数值，不过高度强制为100%的56.25%即9/16的值。。

这样最小宽800和最小高450对应，比值16：9
中间100和56.25对应比值16：9
最大宽1440和最大高810对应，比值16：9
无论多少宽高，结果都按预想显示。。。体会数学之美。。

马黑黑

雨中悄然 发表于 2025-8-28 22:52
结合这楼的说明，来理解这两句代码，width: clamp(800px, 100vw, 1440px);height: clamp(450px, 56.25vw, ...

这个其实用 aspect-ratio 属性就可以解决，不过此属性对以前版本的浏览器不支持

马黑黑

雨中悄然 发表于 2025-8-28 22:42
先是看到left: calc(50% - var(--offsetX));这个是自动偏移量为啥设成变量了？
之前贴子很干脆，第一句就 ...

这个，只是因为在CSS资源里封装了此句。现在这个是不引用CSS资源的，自然得有自己的定义。

小辣椒

马黑黑 发表于 2025-8-28 22:14
可以多加点，不过要考虑资源消耗，太多，移动端可能顶不住

已经发了，今天有点迟，来不及回帖，先下了

雨中悄然

马黑黑 发表于 2025-8-28 12:49
tz01.css 其实也用到 clamp 属性，它那里不设置帖子高度，通过 aspect-ratio 属性强制按 16:9 设置高度。这 ...

width: clamp(600px, 90vw, 1700px); height: auto;现在明白之前的auto意思就是自己调整高度到完美显示。。无论是大小屏还是小屏都自适 应。。。

本贴的方法，在使用时宽和高的最大值 是不是要换成自己的数据。
比如之前我用1700*900，按比例放大高度应该改为956。。

雨中悄然

小播宽和高也不一样了啊。。。
用的单位也是vw：width: 15vw;height: 15vw;推出来应该是屏幕宽度的15%？
那岂不是屏幕宽度发生变化，小播宽高也会自动变化...
这个设置太妙了吧。。。
跟之前的--ma-size: 8%; 有点像，都能按比例缩小放大

杨帆

马黑黑 发表于 2025-8-28 22:07
800px是下限，1400px是上限，就是讲，首选值不突破800px和1400px时，使用首选值，具体是，横向分辨率不小 ...

明白了，谢谢老师悉心指导

雨中悄然

看到小播是画的圆半透明的，有阴影。。
触碰进行颜色反转，这色彩的差别有点大。。
animation: rot 10s linear infinite var(--state);这个动作里怎么出现个线性单词，难道动作能用线性表示

31行这么长串干嘛用的，木有看懂，后面再说吧。。

马黑黑

雨中悄然 发表于 2025-8-28 23:19
看到小播是画的圆半透明的，有阴影。。
触碰进行颜色反转，这色彩的差别有点大。。
animation: rot 10s l ...

在 animation 属性里的 linear 是匀速运动的意思。linear 在这里不是默认值，所以给上，让运动是均匀运行而不是先慢后快或先快后慢或两头快中减慢等等。并且，两个关键帧动画一同使用。

马黑黑

杨帆 发表于 2025-8-28 23:12
明白了，谢谢老师悉心指导

不懂的时候可以去看看官方文档

马黑黑

雨中悄然 发表于 2025-8-28 23:04
width: clamp(600px, 90vw, 1700px); height: auto;现在明白之前的auto意思就是自己调整高度到完美显示。 ...

当使用了 aspect-ratio 属性，宽高中只需设置其中一个，另一个auto不auto无关紧要，你就是设置为0也可以

雨中悄然

JS里生成了60个粒子，X与80 有关，Y与45有关，是个范围吧。
颜色随机的。。大小也不一样。。

现在再回去看看31楼，应该是控制粒子的透明度可以闪烁，还有移动位置怎么跑00去了。。

马黑黑

小辣椒 发表于 2025-8-28 23:02
已经发了，今天有点迟，来不及回帖，先下了

晚安

雨中悄然

鉴定完毕这就是个神仙贴，小白要看一个小时

马黑黑

雨中悄然 发表于 2025-8-28 23:27
JS里生成了60个粒子，X与80 有关，Y与45有关，是个范围吧。
颜色随机的。。大小也不一样。。

因为 viewBox 属性中设置了 -80 -45 160 90 这样的值，然后每一个粒子的位置是随机的，他们在 0 的可能性不高，一般来说要么是负值，要么是正值，所以可以令它们回到 0 这个地方，这样就产生粒子从上下左右回到中心的运动方向；运动是双向的（alternate)，回到 0 后又会折回，如此反复。

马黑黑

雨中悄然 发表于 2025-8-28 23:30
鉴定完毕这就是个神仙贴，小白要看一个小时

这个本来不难，都是基础CSS的应用