马黑黑 发表于 2023-9-5 22:56
还可以
这个背景变色很有意思，我特地去翻看了RGBA双色线性渐变调配器（定稿）
https://www.huachaowang.com/forum.php?mod=viewthread&tid=59448&fromuid=2
(出处: 花潮论坛)
去理解它的颜色变化，还是挺难理解，主要第二颜色里有个calc(255 - var(--bb))，而js里规定if(num > 255 || num < 0) step = -step;所以想了半天，它是被限制在哪些颜色里{:4_173:}
红影 发表于 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
套用完成{:4_173:}
小辣椒 发表于 2023-9-6 12:37
套用完成
速度
马黑黑 发表于 2023-9-5 12:40
都可以都可以
昨天以为我插队了
马黑黑 发表于 2023-9-5 12:40
刚做好
黑黑辛苦{:4_190:}
马黑黑 发表于 2023-9-5 12:42
忘了说明这个：
yinfu = ['%u2669','%u266f','%u266d','%u266c','%u266b','%u266a','%u263d','%u263c' ...
黑黑真仔细
山人 发表于 2023-9-5 12:52
JS代码头尾加：
(function() {
我都没有注意{:4_203:}
小辣椒 发表于 2023-9-6 12:39
黑黑真仔细
粗心了。
这个编码问题，一直是个麻烦事
小辣椒 发表于 2023-9-6 12:38
黑黑辛苦
手掌辛苦{:4_170:}
小辣椒 发表于 2023-9-6 12:40
我都没有注意
这个是评分之后帖子能正常运行
马黑黑 发表于 2023-9-6 12:41
粗心了。
这个编码问题，一直是个麻烦事
想胖吧？已经考虑很周到了
马黑黑 发表于 2023-9-6 12:41
手掌辛苦
老首长最近身体不好，都很少看见首长出来了
都记挂手掌的{:4_203:}
马黑黑 发表于 2023-9-6 08:20
--bb 是CSS变量，在本帖，使用 rgba() 方式规定颜色，a 是透明通道。
帖子中，主元素使用线性渐变背景 ...
这个讲得真清晰。谢谢黑黑{:4_199:}
红影 发表于 2023-9-6 12:59
这个讲得真清晰。谢谢黑黑
这种机制，和使用 filter 滤镜（比如hue-ratate） 改变整个背景可能不同，但异曲同工
小辣椒 发表于 2023-9-6 12:46
老首长最近身体不好，都很少看见首长出来了
都记挂手掌的
{:4_181:}
小辣椒 发表于 2023-9-6 12:43
想胖吧？已经考虑很周到了
胖胖更能抗台风
马黑黑 发表于 2023-9-6 22:26
这种机制，和使用 filter 滤镜（比如hue-ratate） 改变整个背景可能不同，但异曲同工
肯定不同啊，而且这个可调性更大些{:4_187:}
红影 发表于 2023-9-7 20:22
肯定不同啊，而且这个可调性更大些
其实也差不多