- 需求的场景描述（希望解决的问题）

在camera组件上 实现动画效果。类似于微信扫一扫中的扫描线。

具体问题：在打开摄像头后，页面会出现一串随机码，随机码需要增加 逐渐改变字体颜色的动画效果，在7s内结束。

我在微信开发者工具内实现了这个效果。但是真机上不行。

具体代码如下：

html：

<cover-view  class="code {{colorful}}">{{code}}</cover-view>

css如下：:

.colorful{

/*渐变背景*/

background: -webkit-linear-gradient(left, white, #0f0);

color: transparent; /*文字填充色为透明*/

-webkit-text-fill-color: transparent;

-webkit-background-clip: text; /*背景剪裁为文字，只将文字显示为背景*/

background-size: 200% 100%; /*背景图片向水平方向扩大一倍，这样background-position才有移动与变化的空间*//* 动画 */

animation-iteration-count: 1; /*只循环一次*/

animation: masked-animation 7s infinite linear;

}

@keyframes masked-animation {

0% {

background-position: 0 0; /*background-position 属性设置背景图像的起始位置。*/

}

100% {

background-position: -100% 0;

}

}

- 希望提供的能力

有没有什么好的方法在真机上实现这个动画效果