SOURCE

console 命令行工具 X clear

                    
>
console
<h1 data-spotLight="杨涵是个大帅哥">杨涵是个大帅哥</h1>

html{
    font-size: 15px;
}

body{
    background-color: #222;
    display: flex;
    justify-content:center;
    align-items: center;
    min-height: 100vh;
    overflow: hidden;
}

h1{
    color: #333;
    font-family: Helvetica;
    margin:0;
    padding: 0;
    font-size: 5rem;
    letter-spacing: -0.3rem;
    position: relative;
}

h1::after{
    content: attr(data-spotLight);
    color: transparent;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-clip-path: ellipse(100px 100px at 0% 50%);
    clip-path: ellipse(100px 100px at 0% 50%);
    animation: spotLight 5s infinite;
    background-image: url(https://img2.baidu.com/it/u=2109829755,1805800604&fm=253&fmt=auto&app=138&f=PNG?w=500&h=1040);
    background-size: 150%;
    background-position: center center;
    -webkit-background-clip: text;
    background-clip: text;

}

@keyframes spotLight{
    0%{
         -webkit-clip-path: ellipse(100px 100px at 0% 50%);
    clip-path: ellipse(100px 100px at 0% 50%)
    }

    50%{
         -webkit-clip-path: ellipse(100px 100px at 100% 50%);
    clip-path: ellipse(100px 100px at 100% 50%)
    }

    100%{
         -webkit-clip-path: ellipse(100px 100px at 0% 50%);
    clip-path: ellipse(100px 100px at 0% 50%)
    }
}