<template>
<view class="content">
<view class="water">
<view class="water_1">WATER</view>
</view>
<view class="water">
<view class="text-clip" data-text="Hello World"></view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: 'Hello'
}
},
onLoad() {
},
methods: {
}
}
</script>
<style scoped>
.content{
width: 100%;
}
.water{
width: 50%;
/* font-size: 3em; */
margin: auto;
/* border: 1px #999999 solid; */
}
.water_1{
width: 100%;
font-size: 70px;
/* font-size: 10em; */
margin: auto;
color: #999999;
/* color: rgba(255,255,255,.1); */
/* background-image: url(../../static/logo.png) repeat-x; */
/* -webkit-background-clip:text; */
background-image: linear-gradient(to right, transparent, #999999);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
/* css动画引入时间12s*/
animation: animate 12s linear;
/* -webkit-background-clip:text; */
/* color: rgba(255, 255, 255, .1); */
/* border: 1px #999999 solid; */
}
.text-clip {
position: relative;
display: inline-block;
border: 1px #999999 solid;
}
.text-clip::before {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
background-image: linear-gradient(to right, transparent, white);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/* css动画 */
@keyframes animate{
0%{
background-position: left 0px top 80px;
}
40%{
background-position: left 800px top -50px;
}
80%{
background-position: left 1800px top -50px;
}
100%{
background-position: left 2400px top -50px;
}
}
</style>