CSS 如何实现五彩斑斓的“呼吸字”?速度拿去装杯!😏
掘金安东尼 2022-11-08
CSS
什么是五彩斑斓的“呼吸字”??
不多哔哔,先用【码上掘金】来看看实现效果:
谁不喜欢这种金光闪闪、有动效的字?(实际颜色可调,按你喜欢)用来做网页头部文字,效果拉起来~ 😏
来源:https://codepen.io/jh3y/details/YzYgMra
用纯 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;
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
如果不想看原理,直接拿去用~
如果想了解原理,继续往下看,同样也很简单。
实现步骤:
- 先给 body 加个偏深的背景色,这是可选项,按你喜欢的来。
body {
display: grid;
place-items: center;
min-height: 100vh;
background: hsl(0 0% 20%);
}
1
2
3
4
5
6
2
3
4
5
6
- 设置 font-size clamp 属性;
.boujee-text {
font-size: clamp(3rem, 25vmin, 12rem);
}
1
2
3
2
3
clamp 的目的只是为了控制文本的大小在一个范围值内,不清楚用法请阅读 ☞ MDN (opens new window)
- 设置背景色为渐变色,并将其旋转 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
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
- 设置 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
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
- 将背景色应用到文本上,
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
- 接着为文本的颜色设置动画,先设关键帧;
@keyframes move-bg {
to {
background-position: var(--bg-size) 0;
}
}
1
2
3
4
5
2
3
4
5
- 然后设置 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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
- 最后,你可以自己根据媒体查询设置不同的动作;
@media (prefers-reduced-motion: no-preference) {
.boujee-text {
animation: move-bg 8s linear infinite;
}
@keyframes move-bg {
to {
background-position: var(--bg-size) 0;
}
}
}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
综上,background-clip 属性是关键!!
赶紧在你的项目中使用起来吧,兼容性挺好~~
相信你基于它也能玩出别的花来~~
OK,以上便是本篇分享,希望各位工友喜欢~ 欢迎点赞、收藏、评论 🤟
我是掘金安东尼 🤠 100 万人气前端技术博主 💥 INFP 写作人格坚持 1000 日更文 ✍ 关注我,安东尼陪你一起度过漫长编程岁月 🌏