css 实现流光字体效果

<template>

<div>

    <p data-text="Lorem ipsum dolor"> Lorem ipsum dolor </p>

</div>

</template>

<script>

export default {

}

</script>

<style lang="scss">

html, body {

    width: 100%;

    height: 100%;

    background-image: radial-gradient(ellipse  farthest-side at 44% 16%, #455A64 0%, #263238 105%, #1a2327 268% );

    margin: 0;

    color: #E8A95B;

    display: flex;

}

p {

    position: relative;

    margin: auto;

    font-size: 50px;

    word-spacing: 10px; // 规定文字中间的空格为 10px

    display: inline-block;

    white-space: nowrap;

    color: transparent;  // transparent - 透明

    background-color: #E8A95B;

    -webkit-background-clip: text; // 兼容其他浏览器 规定以 文字 裁剪 background-clip 规定以什么地方裁剪 text - 文字

}

p::after {

    content: attr(data-text);  // content 语法与属性值: attr(attribute) -- 将元素的 attribute 属性以字符串形式返回。

    position: absolute;

    left: 0px;

    top: 0px;

    z-index: 5;

    //

    background-image: linear-gradient(

        120deg,

        transparent 0px,

        rgb(101, 13, 243) 0px,

        transparent 60px,

        rgba(223, 203, 203, .3) 0px,

        transparent -60px,

        rgb(101, 13, 243) 200px,

        transparent -160px,

        rgba(223, 203, 203, .3) 200px,

        transparent 0px,

        rgb(101, 13, 243) 0px,

    );

    background-clip: text;

    background-size: 150%;

    animation: shine 8s infinite linear;

}

@keyframes shine {

    0% {

        background-position: 50% 0;

    }

    100% {

        background-position: -190% 0;

    }

}

</style>

 

转自： https://csscoco.com/inspiration/#/./background/bg-clip-text-shine.md