Question

我想到了整个过渡的事情，也看到了文本的颜色正在转变 - 它穿过其他颜色的色彩。
当我看到一个我想要的漂亮的颜色时，我遇到了很多情况，但它是过渡过程的一部分，我最终无法完成它。
例如，此代码：

HTML：

<div id="transition">
ultra super califragilisticexpialidocious
</div>

CSS：

#transition {
color:black;
transition: 1s color;
}
#transition:hover {
color:#f00;
}

演示：JsBin
您可以看到过渡在文本转换时显示栗色，我的意思是，我怎样才能获得这种特殊的栗色色调？
一般来说，我的问题是，如何在转换过程中获得颜色？有办法挑选吗？

提前致谢

Answer 1

嗯，我们最喜欢的东西我们最喜欢的东西往往是难以获得的东西; - ）

但在这种情况下并不是那么难。问题是，选择过渡颜色是否是获得所需内容的最佳方式。用手改变颜色直到看起来最好是不是更简单？

这是如何使用Firefox的Firebug插件轻松更改显示的字体颜色：

打开包含转换的页面并打开Firebug窗口。
选择HTML标签，然后选择侧面板的Style标签页（如果侧面板已关闭，请点击右上角的小箭头将其打开）。
单击Firebug窗口左上角带有鼠标指针的按钮，然后单击带有转换的div，然后选择它。
您可能希望通过单击左侧的样式禁用样式中的transition。
您可能希望以RGB而不是十六进制显示颜色（您可以根据需要来回切换），方法是单击“样式”选项卡中的下拉按钮并选择所需的模式。
您可以单击颜色值进行编辑。您可以再次单击一个组件（也可以在十六进制模式下工作），然后使用向上和向下箭头键，而不是重写它。它几乎就像每个组件都有一个滑块。如果选择了整个值，箭头键会同时更改所有三个组件。

Chrome操作上几乎完全相同。使用Ctrl-Shift-I打开开发人员工具，使用放大镜按钮选择元素，然后编辑其样式。您可以通过单击“样式”窗口中的齿轮来在十六进制颜色和RGB颜色之间切换。与Firebug的不同之处在于，您只能在RGB模式下使用向上和向下箭头键修改单个RGB值，在十六进制模式下，箭头键只能整体更改十六进制值（即，从B通道开始）。

知道过渡点的端点颜色的数值，你可以猜测过渡颜色的数值＆＃34;你要。每个RGB（红色，绿色，蓝色）组件的数值将是其端点之间的中间值，或多或少接近两个端点值之一。

浏览器可以使用它喜欢的算法自由插值。最简单的算法在三维RGB空间中沿着直线移动颜色。内插颜色在这种情况下（在RGB空间中称为线性插值）是

的整数近似值

R = R[0] * (1 - t) + R[1] * t
G = G[0] * (1 - t) + G[1] * t
B = B[0] * (1 - t) + B[1] * t

t的

从0到1不等。对于t = 0.5，您可以获得两个端点之间的线性（RGB）颜色。参数t可以是任何时间函数（在最简单的情况下，它是线性函数，这意味着颜色在两个端点之间的RGB空间中以恒定速度移动）。

正如我所说，浏览器可以以更复杂的方式自由插值，以获得更好的视觉效果。如果确实需要查看浏览器的功能，可以将其降低到蜗牛速度（例如，通过使用Firebug编辑transition-duration），然后抓住屏幕（例如，按下＆＃34;打印Scrn＆＃34;键，打开您喜欢的图像编辑器，粘贴打印的屏幕（通常按Ctrl-V），最后选择一个全彩色像素，以获得您渴望长颜色的RGB值。

顺便说一下，你的测试用例特别容易，因为端点是(0,0,0)和(255,0,0)，所以你所追求的栗色几乎肯定只是一种暗红色{{1 }}。您只有一个参数可以改变，甚至可以通过编辑器的试错来实现！

过渡时获得颜色的方法

1 个答案: