红影 发表于 2025-8-28 20:16
也就是说，宽度在最小值800和最大值1440之间的时候，直接使用100vm，宽度全屏的数值，高度用16:9 得到高度 ...
全屏基本不受这些设置所影响，它自有一套机制（不过和背景的设置有些关系）
小辣椒 发表于 2025-8-28 22:09
我用了个图测试效果不错，中间的粒子我加多了数量，效果很好
可以多加点，不过要考虑资源消耗，太多，移动端可能顶不住
太好了，这个感觉有点面熟。。这一组贴子里常常出现的。
width: clamp(600px, 90vw, 1700px); height: auto;
这是为了自适应小设备而设的，自打有了它之后，小屏手机看贴子全部都能看全了。。很完美。。
今天是用这个特性来强制设置为16：9{:4_199:}我来仔细看看
先是看到left: calc(50% - var(--offsetX));这个是自动偏移量为啥设成变量了？
之前贴子很干脆，第一句就是--offsetX: 81px;{:4_173:}
现在看到最后一行的了--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
{:4_173:}无论多少宽高，结果都按预想显示。。。体会数学之美。。
雨中悄然 发表于 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。。
小播宽和高也不一样了啊。。。{:4_173:}
用的单位也是vw：width: 15vw;height: 15vw;推出来应该是屏幕宽度的15%？
那岂不是屏幕宽度发生变化，小播宽高也会自动变化...
这个设置太妙了吧。。。
跟之前的--ma-size: 8%; 有点像，都能按比例缩小放大
马黑黑 发表于 2025-8-28 22:07
800px是下限，1400px是上限，就是讲，首选值不突破800px和1400px时，使用首选值，具体是，横向分辨率不小 ...
明白了，谢谢老师悉心指导{:4_190:}
看到小播是画的圆半透明的，有阴影。。
触碰进行颜色反转，这色彩的差别有点大。。
animation: rot 10s linear infinite var(--state);这个动作里怎么出现个线性单词，难道动作能用线性表示
31行这么长串干嘛用的，木有看懂，后面再说吧。。{:4_170:}
雨中悄然 发表于 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有关，是个范围吧。
颜色随机的。。大小也不一样。。
{:4_170:}
现在再回去看看31楼，应该是控制粒子的透明度可以闪烁，还有移动位置怎么跑00去了。。
小辣椒 发表于 2025-8-28 23:02
已经发了，今天有点迟，来不及回帖，先下了
晚安
鉴定完毕这就是个神仙贴，小白要看一个小时{:4_173:}
雨中悄然 发表于 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的应用