渐变背景动画

组件介绍

渐变背景动画可以设置一个渐变背景，并产生背景移动动画。

组件名称

gal-animate-bg

兼容平台

H5	APP	小程序
✔	✔	✔

组件属性

属性名称	类型	默认值	作用
bgColors	String	-45deg, #9055FF, #13E2DA , #6699FF, #0B63F6	渐变背景颜色配置
speed	String	15s	动画执行时间

演示代码

<template>
	<view class="gal-body">
		<view style="margin-top:50rpx;">
			<text class="gal-block-text gal-h4 gal-color-gray">渐变动画背景</text>
		</view>
		<view class="gal-margin-top">
			<gal-animate-bg 
			:bgColors="background">
				<view class="demo gal-text-center">
					<text class="demo-title">www.GraceUI.com</text>
				</view>
			</gal-animate-bg>
		</view>
		<view
		class="gal-flex gal-rows gal-nowrap gal-justify-content-center gal-align-items-center gal-margin-top-large" 
		hover-class="gal-tap">
			<text class="gal-color-gray gal-text gal-icons" 
			@tap="changeBG">点击这里更换背景</text>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			background : '-45deg, #9055FF, #13E2DA  , #6699FF, #0B63F6'
		}
	},
	methods: {
		changeBG : function () {
			this.background = '-45deg, #E233FF , #FF6B00, #FF0076, #590FB7';
		}
	}
}
</script>
<style>
.demo{width:100%; height:300rpx;}
.demo-title{font-size:50rpx; line-height:300rpx; color:#FFFFFF;}
</style>