效果:
- 所有代码
<!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>
京公网安备 11010802035086号