- 需求的场景描述(希望解决的问题)
在camera组件上 实现动画效果。类似于微信扫一扫中的扫描线。
具体问题:在打开摄像头后,页面会出现一串随机码,随机码需要增加 逐渐改变字体颜色的动画效果,在7s内结束。
我在微信开发者工具内实现了这个效果。但是真机上不行。
具体代码如下:
html:
{{code}}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;
}
}
- 希望提供的能力
有没有什么好的方法在真机上实现这个动画效果
微信小程序开发问题解答
本文网址:http://www.91bianli.com/weixinxiaochengxu/51593.html