Demo实现:渐变颜色字

实现效果

期望功能

  • 字体颜色渐变
  • 渐变颜色动画效果

思路

实现字体颜色渐变

基本参考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)
  }
}

链接

相关推荐
MiyueFE4 分钟前
14 个逻辑驱动的 UI 设计技巧,助您改善任何界面
前端·设计
啃火龙果的兔子8 分钟前
前端单元测试覆盖率工具有哪些,分别有什么优缺点
前端·单元测试
「、皓子~36 分钟前
后台管理系统的诞生 - 利用AI 1天完成整个后台管理系统的微服务后端+前端
前端·人工智能·微服务·小程序·go·ai编程·ai写作
就改了39 分钟前
Ajax——在OA系统提升性能的局部刷新
前端·javascript·ajax
凌冰_41 分钟前
Ajax 入门
前端·javascript·ajax
京东零售技术1 小时前
京东小程序JS API仓颉改造实践
前端
老A技术联盟1 小时前
从小白入门,基于Cursor开发一个前端小程序之Cursor 编程实践与案例分析
前端·小程序
风铃喵游1 小时前
构建引擎: 打造小程序编译器
前端·小程序·架构
sunbyte1 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | ThemeClock(主题时钟)
前端·javascript·css·vue.js·前端框架·tailwindcss
小飞悟1 小时前
🎯 什么是模块化?CommonJS 和 ES6 Modules 到底有什么区别?小白也能看懂
前端·javascript·设计