关于彩虹字体和渐变字体

关于彩虹字体

红->绿
255.0.0 -> 255.++.0 -> 255.255.0 -> --.255.0 -> 0.255.0

绿->篮
0.255.0 -> 0.255.++ -> 0.255.255 -> 0.--.255 -> 0.0.255

篮->红
0.0.255 -> ++.0.255 -> 255.0.255 -> 255.0.-- -> 255.0.0

综合:

255.0.0 -> 255.++.0 -> 255.255.0 -> --.255.0 -> 0.255.0 -> 0.255.++ -> 0.255.255 -> 0.--.255 -> 0.0.255 -> ++.0.255 -> 255.0.255 -> 255.0.-- -> 255.0.0 (循环)

中间的节点项:

255.0.0
255.255.0
0.255.0
0.255.255
0.0.255
255.0.255
255.0.0

所得的变化段为6段渐变.所以字符串分为6段等长字符

每段颜色渐变step为: (s.length/6)/255

找到规律.算法就很简单了..

扩展:

颜色开始值为随机颜色,判断颜色所属区间,然后渐变算法处理,到下一个循环为止..

附: 网上很多流传关于rainbow.htc的彩虹字体,不过只能说是彩色字体,而不是彩虹字体,看起来并不好看

关于渐变字体

相对而言渐变字体的算法简单多了

确定红绿篮的一种基准颜色 *.255.* 或 128.*.* 或 *.*.200

渐变颜色变化过程:
*.255.* -> ++.255.++ -> 255.255.255 渐变颜色点淡 (为了防止颜色变为白色(底色),可以设置一个边界)
*.255.* -> --.--.-- -> 0.0.0 渐变颜色加深 (为了防止颜色变为黑色,也可以设置一个上界)

算法实现,后面补上

实现效果

彩虹字体

彩虹我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我

渐变字体
我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我

关于彩虹字体和渐变字体相关推荐

html字体渐变颜色的设置颜色代码,使用CSS3实现字体颜色渐变的实现
在使用Animation.css的时候发现它的官网字体会渐变,看了一下他的css很有趣 .site__title { color: #f35626; background-image: -webkit ...
设计师妹子问：字体颜色渐变，你能实现？
早上设计师妹子把设计稿交付过来,乍一看,上面的文字颜色渐变的,而且文字内容是动态的,也就是我们无法用图片来代替. 作为一个有责任担当的汉子,坚决不能说不行. 想起了CSS3 擅长做颜色渐变.所以赶紧查 ...
html对称标记,html5/css3 字体对称渐变+描边+影子
html5/css3 字体对称渐变+描边+阴影如题,如下图:如何实现 ?? 效果图: (图中1是对称渐变,2是线性渐变,实现其中一种就行,两种能实现那就最好,谢谢!!!) 下面我的代码已经实现了 ...
CSS渐变字体、镂空字体、input框提示信息颜色、给图片加上内阴影
1.渐变字体主要是看:-webkit-background-clip: text; 该属性 <style>.b1{width: 500px;height: 200px;font-size ...
CSS渐变字体、镂空字体、input框提示信息颜色、给图片加上内阴影、3/4圆
1.渐变字体主要是看:-webkit-background-clip: text; 该属性 <style>.b1{width: 500px;height: 200px;font-size ...
css怎么设置字体颜色渐变
css设置字体颜色渐变的方法:1.使用"background-cli"和"text-fill-color"实现字体颜色渐变:2.使用"mask-ima ...
字体图标,渐变,变形
字体图标的引用方式:[一般用i引用] 1.类引用首先要link引入字体图标样式表.css文件,然后两个类名第一个类名 iconfont 目的是告诉这个盒子里面的文字是字体图标. 不是普通的文字. ...
unity字体效果-1分钟制作渐变字体
** 如何制作渐变字体? ** 效果展示: 1 新建Text-TextMeshPro对象 2 勾选 ColorGradient, 并再 ColorMode 选择 Four Corners Gradie ...
css设置字体颜色渐变
/* 字体颜色渐变 */ color: #86c9f4; background: -webkit-linear-gradient(90deg, #f3fbfe, #86c9f4); -webkit-b ...

关于彩虹字体和渐变字体

关于彩虹字体和渐变字体相关推荐

最新文章

热门文章