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

马黑黑

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

如果你只希望最大宽度值是 1700px，那么，让它取代 1400px，高度计算一下最大值。

杨帆

马黑黑 发表于 2025-8-28 23:25
不懂的时候可以去看看官方文档

好的，谢谢老师

清茶煮雪

欣赏黑黑老师精品佳作

花飞飞

马黑黑 发表于 2025-8-28 22:55
这个其实用 aspect-ratio 属性就可以解决，不过此属性对以前版本的浏览器不支持

以前的浏览器版本是指什么版本。。。还存在的多么

花飞飞

马黑黑 发表于 2025-8-28 22:56
这个，只是因为在CSS资源里封装了此句。现在这个是不引用CSS资源的，自然得有自己的定义。

现在明白了，今天的02也封进去了。同样只给个数据即可

花飞飞

马黑黑 发表于 2025-8-28 23:24
在 animation 属性里的 linear 是匀速运动的意思。linear 在这里不是默认值，所以给上，让运动是均匀运行 ...

这里是匀速的意思。原来是我理解错了。。。就是用了之后，就会比较自然流畅的过渡

花飞飞

马黑黑 发表于 2025-8-28 23:26
当使用了 aspect-ratio 属性，宽高中只需设置其中一个，另一个auto不auto无关紧要，你就是设置为0也可以

aspect-ratio 属性有点偏自动化一些。。

花飞飞

马黑黑 发表于 2025-8-28 23:30
因为 viewBox 属性中设置了 -80 -45 160 90 这样的值，然后每一个粒子的位置是随机的，他们在 0 的可能性 ...

所以就呈现了在中心聚拢再分散，原来如此。。这个还挺重要的。

花飞飞

马黑黑 发表于 2025-8-28 23:31
这个本来不难，都是基础CSS的应用

知识点很多，综合起来出现了

花飞飞

马黑黑 发表于 2025-8-28 23:33
如果你只希望最大宽度值是 1700px，那么，让它取代 1400px，高度计算一下最大值。

嗯哪，宽1700对956高

设成这样之后，即何作1800的贴子它也会按1700的比例显示了。。

马黑黑

花飞飞 发表于 2025-8-29 09:45
嗯哪，宽1700对956高

设成这样之后，即何作1800的贴子它也会按1700的比例显示了。。

达到预期就行。

即使使用 tz02.css，也可以使用 clamp 属性重设 width 和 height

马黑黑

花飞飞 发表于 2025-8-29 09:43
知识点很多，综合起来出现了

熟悉做帖需要用到的基本语法，就可以随心所欲

马黑黑

花飞飞 发表于 2025-8-29 09:43
所以就呈现了在中心聚拢再分散，原来如此。。这个还挺重要的。

这也是巧妙利用了 viewBox 对 svg 产生作用这一特性

马黑黑

花飞飞 发表于 2025-8-29 09:39
现在明白了，今天的02也封进去了。同样只给个数据即可

这是买轮子和重新制造轮子的区别

马黑黑

花飞飞 发表于 2025-8-29 09:41
aspect-ratio 属性有点偏自动化一些。。

用它其实更好

马黑黑

菲儿 发表于 2025-8-29 09:03
欣赏黑黑老师精品佳作

马黑黑

花飞飞 发表于 2025-8-29 09:38
以前的浏览器版本是指什么版本。。。还存在的多么

一般来说，chromium内核的分水岭可以以华为PC浏览器使用的版本做依据，chromium 90

马黑黑

花飞飞 发表于 2025-8-29 09:40
这里是匀速的意思。原来是我理解错了。。。就是用了之后，就会比较自然流畅的过渡

linear单词原意是直线、匀速等，它在CSS中有不同的含义：

用于 animation 属性，表示匀速；
用于 linear-gradeint() 函数，表示线性（渐变）。

还有一个词，inset ：

作为属性使用时，用来规定 上右下左的定位；
作为 box-shadow()函数的参数使用时，表示内阴影

红影

马黑黑 发表于 2025-8-28 22:09
额，数据有误也有可能，但可能是考虑到其它方面的问题。最后的修正数值设置请参阅：

http://mhh.52qin ...

代码里的是对的，后来的说明文字估计复制问题。

红影

马黑黑 发表于 2025-8-28 22:10
动画里面的巧妙之处与 viewBox 息息相关，希望能看得出来

粒子的透明度应该是css里设置的吧