啥也不说,先上效果图
实现方式 background-clip: text
再text上面再放一个绝对定位的相同的文字,使用 text 属性将红色背景裁剪到文字上就可以。 组件具体代码
<view class="oneText">
<text class="text">{{text}}</text>
<view class="copyText">
<text class="inner" style="animation-duration: {{duration}}s; animation-iteration-count: {{infinite ? 'infinite' : 1}};">{{text}}</text>
</view>
</view>
.oneText {
position: relative;
}
.copyText {
top: 0;
left: 0;
position: absolute;
}
.inner {
color: transparent;
background: linear-gradient(to right, red, red);
-webkit-background-clip: text;
background-repeat: no-repeat;
animation: landIn 20s linear normal;
background-size: 0% 100%;
animation-duration: 5s;
/* background-size: 0% 100%; */
/* transition: all 10s linear; */
}
@keyframes landIn {
0% {
background-size: 0 100%;
}
100% {
background-size: 100% 100%;
}
}