【色彩摸鱼】彩虹色的字体。。

最新推荐文章于 2024-05-27 22:35:16 发布

natsuyu

最新推荐文章于 2024-05-27 22:35:16 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端！。色彩！。待深扒！。服务器

本文链接：https://blog.youkuaiyun.com/natsuyu/article/details/50867483

前端！。同时被 3 个专栏收录

28 篇文章

订阅专栏

服务器

4 篇文章

订阅专栏

色彩！。

1 篇文章

订阅专栏

本文介绍了一个有趣的彩虹文字效果实现方法，通过使用JavaScript动态调整每个字符的颜色来形成彩虹渐变效果，并分享了核心代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天班聚回来特别困。。睡了一觉之后发现了个有趣的demo。。因为是英文。。又迷迷糊糊。。所以没有看懂原理。。先拿来玩玩，有空了再扒扒原理。

23333，，蜜汁摸鱼。效果如下：

核心代码就这一段：

<span style="font-size:14px;">function getRainbow(width, center, str){
			if(!width) width = 127;
			if(!center) center = 128;
			if(!str) str = "I love you baby, and if it quite all right.I need you baby, to warm the lonely night.";
			var fre = 0.3;
			var p = [0,2,4];
			for(var i = 0;i<str.length;i++)
			{
				rgb[0] = Math.round(Math.sin(fre*i + p[0])*width) + center;
				rgb[1] = Math.round(Math.sin(fre*i + p[1])*width) + center;
				rgb[2] = Math.round(Math.sin(fre*i + p[2])*width) + center;
				createDiv(rgb[0],rgb[1],rgb[2],str[i]);
			}
		}</span>

createDiv是dom操作，插入font标签来一个一个显示字母的。container是字符所在的元素：

<span style="font-size:14px;">function createDiv(a,b,c,d){
			var t = document.createElement("font");
			t.className = "ele";
			t.innerHTML = d;
			t.style.cssText = "color:rgb("+a+","+b+","+c+");";
			container.appendChild(t);
		}</span>

貌似是因为颜色的灰度变化和sin值变化有关，所以可以根据sin值来产生彩虹色。= =。

原文地址：http://krazydad.com/tutorials/makecolors.php

*************************************************************************************************************************

今天摸了下色块的移动。。本来以为要自己写的。。但是没有什么想法。。。看了源码发现用了jquery-ui插件。。囧。。。这么久了居然用过的插件和库屈指可数。。。因为不喜欢出错了不知道错哪里。。或者说操作的细节自己不知道。。。0 0

好羞愧。。但是不知道怎么看源码才好。。想知道是怎么做到的。。

demo参见：点击打开链接