什么是五彩斑斓的“呼吸字”？？
不多哔哔，先用【码上掘金】来看看实现效果：
谁不喜欢这种金光闪闪、有动效的字？（实际颜色可调，按你喜欢）用来做网页头部文字，效果拉起来~ 😏
用纯 CSS 实现就可以了，代码其实也很精简，完整代码：
* { box-sizing: border-box; } body { display: grid; place-items: center; min-height: 100vh; background: hsl(0 0% 20%); } .boujee-text { --bg-size: 400%; --color-one: hsl(15 90% 55%); --color-two: hsl(40 95% 55%); font-size: clamp(3rem, 25vmin, 8rem); background: linear-gradient( 90deg, var(--color-one), var(--color-two), var(--color-one) ) 0 0 / var(--bg-size) 100%; color: transparent; background-clip: text; -webkit-background-clip: text; animation: move-bg 8s infinite linear; } @media (prefers-reduced-motion: no-preference) { .boujee-text { animation: move-bg 8s linear infinite; } @keyframes move-bg { to { background-position: var(--bg-size) 0; } } }
如果不想看原理，直接拿去用~
如果想了解原理，继续往下看，同样也很简单。
实现步骤：
- 先给 body 加个偏深的背景色，这是可选项，按你喜欢的来。
body { display: grid; place-items: center; min-height: 100vh; background: hsl(0 0% 20%); }
- 设置 font-size clamp 属性；
.boujee-text { font-size: clamp(3rem, 25vmin, 12rem); }
clamp 的目的只是为了控制文本的大小在一个范围值内，不清楚用法请阅读 ☞ MDN
- 设置背景色为渐变色，并将其旋转 90 度；
.boujee-text { --color-one: hsl(15 90% 55%); --color-two: hsl(40 95% 55%); font-size: clamp(3rem, 25vmin, 8rem); background: linear-gradient( 90deg, var(--color-one), var(--color-two), var(--color-one) ) 0 0 / 100% 100%; }
- 设置 background-size-x，--bg-size: 400%;
.boujee-text { --bg-size: 400%; --color-one: hsl(15 90% 55%); --color-two: hsl(40 95% 55%); font-size: clamp(3rem, 25vmin, 8rem); background: linear-gradient( 90deg, var(--color-one), var(--color-two), var(--color-one) ) 0 0 / var(--bg-size) 100%; }
- 将背景色应用到文本上，
background-clip: text这一步是最关键的！！
.boujee-text { --bg-size: 400%; --color-one: hsl(15 90% 55%); --color-two: hsl(40 95% 55%); font-size: clamp(3rem, 25vmin, 8rem); background: linear-gradient( 90deg, var(--color-one), var(--color-two), var(--color-one) ) 0 0 / var(--bg-size) 100%; color: transparent; -webkit-background-clip: text; background-clip: text; }
- 接着为文本的颜色设置动画，先设关键帧；
@keyframes move-bg { to { background-position: var(--bg-size) 0; } }
- 然后设置 animation 属性：
.boujee-text { --bg-size: 400%; --color-one: hsl(15 90% 55%); --color-two: hsl(40 95% 55%); font-size: clamp(3rem, 25vmin, 8rem); background: linear-gradient( 90deg, var(--color-one), var(--color-two), var(--color-one) ) 0 0 / var(--bg-size) 100%; color: transparent; background-clip: text; -webkit-background-clip: text; animation: move-bg 8s infinite linear; }
- 最后，你可以自己根据媒体查询设置不同的动作；
@media (prefers-reduced-motion: no-preference) { .boujee-text { animation: move-bg 8s linear infinite; } @keyframes move-bg { to { background-position: var(--bg-size) 0; } } } 复制代码
综上，background-clip 属性是关键！！
赶紧在你的项目中使用起来吧，兼容性挺好~~
相信你基于它也能玩出别的花来~~
OK，以上便是本篇分享，希望各位工友喜欢~ 欢迎点赞、收藏、评论 🤟
我是掘金安东尼 🤠 100 万人气前端技术博主 💥 INFP 写作人格坚持 1000 日更文 ✍ 关注我，安东尼陪你一起度过漫长编程岁月 🌏
