效果:
- 所有代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
background: #485460;
}
.text {
font-size: 120px;
position: relative;
color: #84817a;
}
.text::after {
content: attr(data-content);
position: absolute;
left: 0;
top: 0;
/* 設置背景漸變顏色 */
background-image: linear-gradient(90deg, #ff5252, #ff793f, #33d9b2);
/* 背景裁切, 讓它只有在文字區域才有背景 */
-webkit-background-clip: text;
background-clip: text;
/* 取消掉文字的顏色 */
color: transparent;
/*
x軸半徑, y軸半徑, at 圓心坐標
讓它只顯示部分大小, 也就是聚光燈的所照的位置
240正好是兩個字的寬度
*/
clip-path: ellipse(240px 120px at 0% 50%);
/*
上面固定了顯示區域, 現在就是讓顯示的區域左右移動即可
*/
animation: move 2s linear infinite alternate;
}
@keyframes move {
to {
/* 到終點 */
clip-path: ellipse(240px 120px at 100% 50%);
}
}
</style>
</head>
<body>
<div class="text" data-content="一個爬坑的Coder">
一個爬坑的Coder
</div>
</body>
</html>
