首先上效果圖：
HTML
<body>
<h1>Hello,World!</h1>
</body>
CSS
1、首先讓h1垂直居中滿屏顯示
*{
margin: 0;
padding: 0;
font-size: 16px;
}
body{
background-color: #222;
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
}
h1{
color: #333;
margin: 0;
padding: 0;
font-size: 10rem;
position: relative;
}
2、使用定位給h1添加一個遮罩，做出顏色（color一定要透明），將背景做出漸變燈光效果
background-img：添加自己想要的背景圖片
background-clip: text;將背景按照文字輪廓填充；
clip-path: ellipse(100px 100px at 0% 50%);畫一個直徑爲100排序的圓
使用@keyframes添加漸變動畫，一個週期內從最左漸變到最右再漸變到最左
@keyframes lightSpot{
0%{
clip-path: ellipse(100px 100px at 0% 50%);
}
50%{
clip-path: ellipse(100px 100px at 100% 50%);
}
100%{
clip-path: ellipse(100px 100px at 0% 50%);
}
}
h1::after{
content: 'Hello,World!';
color: rgba(0,0,0,0);
position: absolute;
left: 0;
right: 0;
clip-path: ellipse(100px 100px at 0% 50%);
animation: lightSpot 8s infinite;
background-image: url(../img/light.jpg);
background-size: 100%;
background-position: center center;
background-clip: text;
-webkit-background-clip: text;
}