〰️波浪文字效果，封装的组件，引入组件即用
<template>
<view class="loading_page" :style="{background: loadingType === 'font' ? '#fff' : ''}" v-if="show">
<view class="imgBox" :style="{'margin-top': loadingType === 'font' ? '-120rpx' : '0'}">
<image v-if="loadingType === 'img'" :src="showImg"></image>
<block v-if="loadingType === 'font'">
<view class="wavy">
<!-- --i是自定义属性，可通过var函数调用 -->
<text style="--i:1;">点</text>
<text style="--i:2;">击</text>
<text style="--i:3;">关</text>
<text style="--i:4;">注</text>
<text style="--i:5;">～</text>
</view>
<view class="wavy">
<text style="--i:8;">持</text>
<text style="--i:9;">续</text>
<text style="--i:10;">分</text>
<text style="--i:11;">享</text>
<text style="--i:12;">更</text>
<text style="--i:13;">多</text>
<text style="--i:14;">前</text>
<text style="--i:15;">端</text>
<text style="--i:16;">文</text>
<text style="--i:17;">章</text>
<text style="--i:18;">.</text>
<text style="--i:19;">.</text>
<text style="--i:20;">.</text>
</view>
</block>
</view>
</view>
</template>
<script>
import {
imgObj
} from '@/utils/imgs'
export default {
data() {
return {
imgObj,
showImg: ''
}
},
props: {
show: {
type: Boolean,
default: true
},
loadingType: {
type: String,
default: 'img'
}
},
watch: {
show: {
handler(val) {
this.showImg = '';
this.showImg = this.imgObj.v2.loading_page;
},
deep: true,
immediate: true
}
},
methods: {
}
}
</script>
<style lang="less" scoped>
.loading_page {
width: 100%;
height: 100%;
position: fixed;
left: 0;
top: 0;
z-index: 99999999;
.imgBox {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
image {
width: 180rpx;
height: 180rpx;
}
}
}
</style>
<style>
.wavy{
margin-top: 40rpx;
/* 相对定位 */
position: relative;
/* 倒影效果 */
-webkit-box-reflect: below -12rpx linear-gradient(transparent,rgba(0,0,0,0.3));
}
.wavy text{
position: relative;
display: inline-block;
color: #004850;
font-size: 32rpx;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 8rpx;
/* 执行动画：动画名 时长 加速后减速 无限次播放 */
animation: wavyAnimate 2.4s ease-in-out infinite;
/* 通过var函数调用自定义属性--i，再计算出动画延迟时间 */
animation-delay: calc(0.1s * var(--i));
}
/* 定义动画 */
@keyframes wavyAnimate {
0%{
transform: translateY(0);
}
20%{
transform: translateY(-20px);
}
40%,100%{
transform: translateY(0);
}
}
</style>