相关介绍

01. 用过 css 的 background-image 属性和 background-clip 属性可以实现渐变文本，并能在文本上实现背景动画。
02. 因封装组件会降低使用时的灵活性，我们利用样式实现这个动画。您可以学习原理并灵活运用在开发中。

兼容平台

完整代码

gitee 仓库地址 : https://gitee.com/hcoder2016/grace-animation-library/blob/master/pages/demo/text/clip-text.vue

<template>
	<view class="gal-padding" 
	style="padding-top:50rpx;">
		<view class="gal-margin-top-large">
			<view>
				<text class="demo staticBg">静态渐变文本</text>
			</view>
		</view>
		<view class="gal-margin-top-large">
			<view>
				<text class="demo animateBG">动画背景文本</text>
			</view>
		</view>
	</view>
</template>
<script>
export default {

}
</script>
<style>
.demo{
	text-align:center; 
	line-height:100rpx; 
	font-size:88rpx; 
	display:block;
	font-weight:bold;
}
.staticBg{
	background-image:linear-gradient(to bottom, #39B55A , #8DC63E);
	background-clip:text;
	color: transparent;
}
.animateBG{
	background-image:linear-gradient(to bottom, #39B55A , #8DC63E);
	background-clip:text;
	color: transparent;
	background-image: url("https://img1.baidu.com/it/u=3496595466,3334896335&fm=26&fmt=auto&gp=0.jpg");
	background-repeat:no-repeat;
	background-size:600rpx auto;
	animation: animateBG 5s infinite alternate;
}

@keyframes animateBG{
	0%{background-position-x:-20%;}
	100%{background-position-x:115%;}
}
</style>