账户中心 退出系统
5.0 版本 3.0 版本
使用手册 模板中心 账户中心 合作 · 服务
快速开始
动画库介绍
下载及部署
基础组件
animate.css 动画组件
animate.css 连贯动画
gal-api-animate 组件
文本动画
文本淡入淡出
文本背景动画
数值展示动画
按钮动画
提交按钮动画
边框动画按钮
点赞按钮动画
常用动画
全屏加载动画
渐变背景动画
时钟动画
红包雨动画
渐变背景动画

组件介绍

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

组件名称

gal-animate-bg

兼容平台

H5APP小程序

组件属性

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

演示代码

<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>