文字颜色横向填充过渡

大家好，欢迎来到IT知识分享网。

成品如图：

 蓝色内容从左往右将白色填充。

一步一步来，

若你和我一样需要’空心文字’需要给文字添加这个样式：

text-shadow: 0 0 2px #0f97ff;

HTML结构如下：

<div class="middle-words"> <p class="default-text">change</p> <p class="transitional-text">change</p> </div>

简单说就是两个相同的文字，然后设置脱离文档流，设置层级，然后通过js判断到一定的位置给高亮的（蓝色的文字元素）一个向右的类（动画）就好了。

具体css代码如下：

因为是scss写的，有些自定义的内容，但不影响该功能。

//动画，仅控制他的长度变化 @keyframes length-animation{ 0%{ width:0%; } 25%{ width:35%; } 50%{ width:60%; } 75%{ width:85%; } 100%{ width:100%; } } 

p{ font-family: $f-PK; text-transform: uppercase; color: $white; width: 100%; font-size: 100px; // line-height: initial; line-height: 100px; display: inline-block; white-space: nowrap; text-align: left; font-weight: 700; @media(max-width: $m-992){ font-size: 80px; display: inline-block; } @media(max-width: $m-576){ font-size: 58px; display: inline-block; } @media(max-width: $m-360){ font-size: 50px; } } .default-text{ width: 100%; text-shadow: 0 0 2px $blue-2; color: $white; } .transitional-text{ position: absolute; pointer-events: none; top: 0px; left: 0px; color: $blue-2; overflow: hidden; width: 100%; } .transitional-over{ animation: length-animation; animation-duration: 1.5s; animation-timing-function:linear; animation-delay:0s; animation-iteration-count:1; animation-direction:normal; }

值得注意的是要给元素设置不换行操作（white-space: nowrap;不然动画会有问题），文字向左对齐（不然两个元素会对不齐），以及设置为行内块元素（为了居中，这样之后让父元素text-aligin-center;就好了），这几点也是坑了我不少时间。