开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第1天,点击查看活动详情
前置知识
background-clip: text
background-clip属性规定背景的绘制区域。
类似photoshop里的 剪贴蒙版 的概念–>(指定一个固定区域,区域的内容随意更换.)
在W3C标准的它有三个值: border-box | padding-box | content-box;
动字面上来理解 分别是 以盒边界来裁剪 | 以内边距为边界来裁剪 | 以内容区域来裁剪
基本概念讲完,我们来回归到 background-clip: text; 顾名思义 就是 以文字的范围来裁剪背景图片。
需要注意的是background-clip: text只兼容chrome,要想兼容其他浏览器就要用: -webkit-background-clip: text;
-webkit-text-fill-color
文字填充色,-webkit-text-fill-color: transparent可以用来设置镂空字体;
linear-gradient
linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。
创建一个线性渐变,需要指定两种颜色,还可以实现不同方向(指定为一个角度)的渐变效果,如果不指定方向,默认从上到下渐变。
@keyframes
使用@keyframes规则,你可以创建动画。
创建动画是通过逐步改变从一个CSS样式设定到另一个。
指定的变化时发生时使用%,或关键字”from”和”to”,这是和0%到100%相同。
0%是开头动画,100%是当动画完成。
为了获得最佳的浏览器支持,您应该始终定义为0%和100%的选择器。
第一步,实现彩虹字🌈
as everyone knows,文字颜色color属性只支持纯色,那么渐变色如何支持呢?答案是-webkit-linear-gradient。
靓仔应该想到了,可以使用color: transparent将文字颜色设置为透明, background-clip: text设置背景根据文字形状裁剪,最后设置渐变背景即可完成渐变彩虹文字🌈
.gradient-text {
color: transparent;
background: -webkit-linear-gradient(30deg, #32c5ff 25%, #b620e0 50%, #f7b500 75%, #20e050 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-size: auto;
}
第二步,实现滚动效果🔥
所谓滚动效果,其实就是背景色的偏移。实现起来很简单:
@keyframes gradientText {
0% {
background-position: 0;
}
100% {
background-position: 28000px;
}
}
.gradient-text {
animation: gradientText 300s infinite linear;
-webkit-animation: gradientText 300s infinite linear;
}
最终效果:
done!
今天的文章🌈动态彩虹渐变字效,靓仔,快拿去装逼分享到此就结束了,感谢您的阅读。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/23435.html