<template>
	<view class="gal-padding" 
	style="padding:30rpx;">
		<view>
			<text class="gal-block-text gal-h4 gal-color-gray">文本背景动画</text>
		</view>
		<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>