暗夜舞者

红影

马黑黑 发表于 2023-9-5 22:56
还可以

这个背景变色很有意思，我特地去翻看了RGBA双色线性渐变调配器（定稿）
https://www.huachaowang.com/foru ... 59448&fromuid=2
(出处: 花潮论坛)
去理解它的颜色变化，还是挺难理解，主要第二颜色里有个calc(255 - var(--bb))，而js里规定if(num > 255 || num < 0) step = -step;所以想了半天，它是被限制在哪些颜色里

红影

红影 发表于 2023-9-5 23:23
这个背景变色很有意思，我特地去翻看了RGBA双色线性渐变调配器（定稿）
https://www.huachaowang.com/fo ...

如果没这个算式，倒是直接可以去拉动那个调整看颜色了，现在还有这么多限制。

马黑黑

红影 发表于 2023-9-5 23:23
这个背景变色很有意思，我特地去翻看了RGBA双色线性渐变调配器（定稿）
https://www.huachaowang.com/fo ...

--bb 是CSS变量，在本帖，使用 rgba() 方式规定颜色，a 是透明通道。

帖子中，主元素使用线性渐变背景 +  url() 函数 共同营造背景效果。渐变放前面，否则渐变效果出不来，同时渐变应使用透明设置（包含颜色的透明度、a通道合适的值）。

rgb值分别代码 red、green和blue 这三种红绿蓝“原色”，第一组参与渐变的颜色，r、g固定为100，b 使用 --bb变量；第二组，r 使用 --bb 变量但不是简单地使用，而是通过 calc() 函数进行计算，calc(255 - var(--bb)，后面会有进一步解释，g、b固定为 0 。

渐变至少需要两种颜色。第一种颜色，蓝色成分由 --bb 变量从 0 到 255 不断变化，第二种颜色，红色成分的变化依据是 255 - bb，其实就是从 255 到 0 不断变化。这些变化自然会影响渐变背景的效果，且这些变化是逆转的，逆转机制由JS把关， 触发条件是 num 数值小于0或大于255时。

针对上述机制，JS所做的，一是，将变量  num 不断加 step，加到 255了，把 step 变为-1，这是变成了减去1，num 变成0了，step 又变为+1；二是改变CSS的 --bb 变量值，以驱动渐变效果的持续改变。这两件事，JS变量 num 和 CSS变量 --bb 关系紧密，num 的变化就是 --bb 的变化。

至于渐变颜色作用的范围，看渐变的方向，本帖是 to right bottom，一个偏红、一个偏蓝的渐变背景变化从主元素的左上开始发起、交融作用到右下。

小辣椒

马黑黑 发表于 2023-9-5 12:43

套用完成

马黑黑

小辣椒 发表于 2023-9-6 12:37
套用完成

速度

小辣椒

马黑黑 发表于 2023-9-5 12:40
都可以都可以

昨天以为我插队了

小辣椒

马黑黑 发表于 2023-9-5 12:40
刚做好

黑黑辛苦

小辣椒

马黑黑 发表于 2023-9-5 12:42
忘了说明这个：

yinfu = ['%u2669','%u266f','%u266d','%u266c','%u266b','%u266a','%u263d','%u263c' ...

黑黑真仔细

小辣椒

山人 发表于 2023-9-5 12:52
JS代码头尾加：

(function() {

我都没有注意

马黑黑

小辣椒 发表于 2023-9-6 12:39
黑黑真仔细

粗心了。
这个编码问题，一直是个麻烦事

马黑黑

小辣椒 发表于 2023-9-6 12:38
黑黑辛苦

手掌辛苦

马黑黑

小辣椒 发表于 2023-9-6 12:40
我都没有注意

这个是评分之后帖子能正常运行

小辣椒

马黑黑 发表于 2023-9-6 12:41
粗心了。
这个编码问题，一直是个麻烦事

想胖吧？已经考虑很周到了

小辣椒

马黑黑 发表于 2023-9-6 12:41
手掌辛苦

老首长最近身体不好，都很少看见首长出来了

都记挂手掌的

红影

马黑黑 发表于 2023-9-6 08:20
--bb 是CSS变量，在本帖，使用 rgba() 方式规定颜色，a 是透明通道。

帖子中，主元素使用线性渐变背景 ...

这个讲得真清晰。谢谢黑黑

马黑黑

红影 发表于 2023-9-6 12:59
这个讲得真清晰。谢谢黑黑

这种机制，和使用 filter 滤镜（比如hue-ratate） 改变整个背景可能不同，但异曲同工

马黑黑

小辣椒 发表于 2023-9-6 12:46
老首长最近身体不好，都很少看见首长出来了

都记挂手掌的

马黑黑

小辣椒 发表于 2023-9-6 12:43
想胖吧？已经考虑很周到了

胖胖更能抗台风

红影

马黑黑 发表于 2023-9-6 22:26
这种机制，和使用 filter 滤镜（比如hue-ratate） 改变整个背景可能不同，但异曲同工

肯定不同啊，而且这个可调性更大些

马黑黑

红影 发表于 2023-9-7 20:22
肯定不同啊，而且这个可调性更大些

其实也差不多