实现效果
期望功能
- 字体颜色渐变
- 渐变颜色动画效果
思路
实现字体颜色渐变
基本参考unocss官网的css样式代码
- color本身不支持设置渐变色,但背景可以
- 所以通过 background 设置背景颜色
- 再通过 background-clip 设置为text可以将背景颜色限定在文字区域
- 最后设置 color 为透明色即可
- 与 unocss 官网设置颜色使用十六进制不同,这里使用 hsl 的方式设置颜色,这样后续只需要控制色相角的值即可得到不同的颜色,方便后续动画的设置
css
.clip {
background: linear-gradient(120deg, hsl(0, 100%, 50%) 30%, hsl(30deg, 100%, 50%));
color: transparent;
background-clip: text;
}
实现渐变颜色动画效果
首先需要改造一下css,让它可以跟随num的值展现不同的渐变颜色,渐变范围为色相环上30度的范围
css
.clip {
--num: 0;
--deg: calc(var(--num) * 1deg );
background: linear-gradient(120deg, hsl(var(--deg), 100%, 50%) 30%, hsl(calc(var(--deg) + 30deg), 100%, 50%));
}
纯css方案实现动画
- 首先需要定义一个动画,让 num 值可以从 0 到 360 变化,之后应用动画即可
- 但自定义属性num值直接用在动画处是不生效的,需要使用@property定义一下相应的属性才可以
- 但这种方案会有兼容性上的问题
css
.clip {
animation: rotate 3s linear infinite;
}
@keyframes rotate {
from {
--num: 0;
}
to {
--num: 360;
}
}
@property --num {
syntax: '<number>';
inherits: false;
initial-value: 0;
}
使用js进行num值的变化
- 首先通过 CSS.paintWorklet 判断浏览器是否支持 @property 的属性定义方式
- 如果不支持,则不断通过requestAnimationFrame调整num的值
ts
const num = ref<number>()
if (!('paintWorklet' in CSS)) {
requestAnimationFrame(innerCallback)
function innerCallback() {
num.value = num.value ? num.value + 1 : 1
requestAnimationFrame(innerCallback)
}
}