写点什么

CSS 如何实现五彩斑斓的“呼吸字”?速度拿去装杯!

作者:掘金安东尼
  • 2022-11-09
    广东
  • 本文字数:1898 字

    阅读完需:约 6 分钟

什么是五彩斑斓的“呼吸字”??


不多哔哔,先用【码上掘金】来看看实现效果:


代码片段


谁不喜欢这种金光闪闪、有动效的字?(实际颜色可调,按你喜欢)用来做网页头部文字,效果拉起来~ 😏



用纯 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; } }}
复制代码


如果不想看原理,直接拿去用~


如果想了解原理,继续往下看,同样也很简单。


<hr>


实现步骤:


  1. 先给 body 加个偏深的背景色,这是可选项,按你喜欢的来。


body {  display: grid;  place-items: center;  min-height: 100vh;  background: hsl(0 0% 20%);}
复制代码


  1. 设置 font-size clamp 属性;


.boujee-text {  font-size: clamp(3rem, 25vmin, 12rem);}
复制代码


clamp 的目的只是为了控制文本的大小在一个范围值内,不清楚用法请阅读 ☞ MDN


  1. 设置背景色为渐变色,并将其旋转 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%;}
复制代码


  1. 设置 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%;}
复制代码


  1. 将背景色应用到文本上,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;}
复制代码


  1. 接着为文本的颜色设置动画,先设关键帧;


@keyframes move-bg {  to {    background-position: var(--bg-size) 0;  }}
复制代码


  1. 然后设置 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;}
复制代码


  1. 最后,你可以自己根据媒体查询设置不同的动作;


@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 日更文 ✍ 关注我,安东尼陪你一起度过漫长编程岁月 🌏


本文正在参加「金石计划 . 瓜分6万现金大奖」

发布于: 刚刚阅读数: 3
用户头像

安东尼陪你度过漫长编程岁月~ 2022-07-14 加入

真正的大师,永远怀着一颗学徒的心(易)

评论

发布
暂无评论
CSS 如何实现五彩斑斓的“呼吸字”?速度拿去装杯!_CSS_掘金安东尼_InfoQ写作社区