css实现多行文本擦除效果

效果展示

css文字渐变显示

一、布局

// 布局
<template>
    <div class="container">
        <p>
            将进酒·君不见 【作者】李白 【朝代】唐
            君不见，黄河之水天上来，奔流到海不复回。
            君不见，高堂明镜悲白发，朝如青丝暮成雪。
            人生得意须尽欢，莫使金樽空对月。 天生我材必有用，千金散尽还复来。
            烹羊宰牛且为乐，会须一饮三百杯。 岑夫子，丹丘生，将进酒，杯莫停。
            与君歌一曲，请君为我倾耳听。 钟鼓馔玉不足贵，但愿长醉不愿醒。
            古来圣贤皆寂寞，惟有饮者留其名。 陈王昔时宴平乐，斗酒十千恣欢谑。
            主人何为言少钱，径须沽取对君酌。
            五花马，千金裘，呼儿将出换美酒，与尔同销万古愁。
        </p>
        <p class="eraser">
            <span class="text"
                >将进酒·君不见 【作者】李白 【朝代】唐
                君不见，黄河之水天上来，奔流到海不复回。
                君不见，高堂明镜悲白发，朝如青丝暮成雪。
                人生得意须尽欢，莫使金樽空对月。
                天生我材必有用，千金散尽还复来。
                烹羊宰牛且为乐，会须一饮三百杯。
                岑夫子，丹丘生，将进酒，杯莫停。 与君歌一曲，请君为我倾耳听。
                钟鼓馔玉不足贵，但愿长醉不愿醒。
                古来圣贤皆寂寞，惟有饮者留其名。
                陈王昔时宴平乐，斗酒十千恣欢谑。
                主人何为言少钱，径须沽取对君酌。
                五花马，千金裘，呼儿将出换美酒，与尔同销万古愁。</span
            >
        </p>
    </div>
</template>

这里之所以用两个p标签存放内容，是因为第一个是用来展示的，第二个是用来展示效果的，且内容需要放在行内元素中，是为了渐变可以使文字渐变，若放在块级元素中，会将整个块都设置渐变

二、样式

// 样式

<style scoped>
.container {
    width: 80%;
    margin: 20px auto;
    line-height: 2;
    position: relative;
    color: #fff;
    font-size: 26px;
}

.eraser {
    position: absolute;
    top: 0;
    left: 0;
}

.text {
    --p: 0%;
    background: linear-gradient(
        to right,
        #0000 var(--p),
        #000 calc(var(--p) + 100px)
    );
    color: transparent;
    animation: eraser 10s forwards;
}

@property --p {
    syntax: '<percentage>';
    initial-value: 0%;
    inherits: false;
}

@keyframes eraser {
    to {
        --p: 100%;
    }
}
</style>