敞开生长之旅!这是我参与「日新方案 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!