如果我有这段代码:
.box {
color: #3399FF /* Blue */
transition: 10s all linear;
}
.box:hover {
color: #FF3300 /* Red */
}
如果我将鼠标悬停在元素上,颜色将在10秒钟内平稳过渡从蓝色变为红色。
如果有一个时间轴:
0秒 - 蓝色
5秒 - ?
10秒 - 红色
有没有一种方法可以计算出在过渡的5秒或任何秒数时的颜色?
如果我有这段代码:
.box {
color: #3399FF /* Blue */
transition: 10s all linear;
}
.box:hover {
color: #FF3300 /* Red */
}
如果我将鼠标悬停在元素上,颜色将在10秒钟内平稳过渡从蓝色变为红色。
如果有一个时间轴:
0秒 - 蓝色
5秒 - ?
10秒 - 红色
有没有一种方法可以计算出在过渡的5秒或任何秒数时的颜色?
transition-timing-function
属性决定,它可以表示为一个三次贝塞尔曲线或对应预定义曲线的预定义关键字。在你的例子中,该属性的值为linear
,所以在5秒的间隔内,该值将正好是起始值和结束值的平均值。您可以使用
- 颜色:通过红、绿、蓝和透明度组件进行插值(将每个组件视为数字,见下文)。插值是在预乘颜色之间完成的(即已将指定的红、绿和蓝分量乘以 alpha)。
window.getComputedStyle()
等方法,在进行过渡的任何时刻获得精确值。如 introductory section 所示:
属性的计算值会随着时间从旧值转换为新值。因此,如果脚本在属性(或其他依赖它的数据)正在进行转换时查询属性的计算值,则会看到代表属性当前动画值的中间值。
f(t) = a + (b - a) * t
,在这种情况下t = 0.5
),并从组件构建颜色十六进制值。 - user2864740a
和b
是RGB组件、色调或其他类型的颜色描述符? - Taranga
是起始值,b
是结束值 - 分别针对每个 R/G/B 组件。例如,R 通道从 x33 (51) 到 xFF (255)。在此过程中的一半是f(0.5) = 51 + (255 - 51) * 0.5 = 153
或 x99 -> "#99????". - user2864740