直播系统搭建，波浪文字效果

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