2 Star 9 Fork 2

hcoder / Grace Animation Library

Create your Gitee Account
Explore and code with more than 6 million developers,Free private repositories !:)
Sign up
Clone or Download
clip-text.vue 1.12 KB
Copy Edit Web IDE Raw Blame History
hcoder authored 2021-04-12 11:31 . 20210412
<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>

Comment ( 0 )

Sign in to post a comment

1
https://gitee.com/hcoder2016/grace-animation-library.git
git@gitee.com:hcoder2016/grace-animation-library.git
hcoder2016
grace-animation-library
Grace Animation Library
master

Search

161121 f78d6d6f 1850385 154831 86f8c370 1850385