写一个文字滑动切换样式效果

 

<template>
    <div class="mainrouter centerWindi">
        <h1>2024,马上暴富</h1>
    </div>
</template>
<style lang="scss">
/* 居中 */
.centerWindi {
    @apply flex justify-center items-center;
    text-align: center;
}

/* 路由 */
.mainrouter {
    background-color: white;
    width: 100%;
    height: 150%;
    border-radius: 4px;
    padding: 25px;
}

h1 {
    //color:coral;
    font-size: 80px;
    font-weight: 700;
    //设置透明度
    background: linear-gradient(to bottom, coral 50%, white 50%)
    // 背景居中显示，背景大小为100%,固定背景
    center center / 100vw 100vh fixed;
    // height: 100vh;
    width: 100%;
    // 背景只覆盖文字
    background-clip: text;
    -webkit-background-clip: text;
    // 将背景色换位透明
    color:transparent;
    // 设置描边
    -webkit-text-stroke: 2px coral;
}
</style>