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

相关介绍

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

兼容平台

H5APP小程序

完整代码

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>