总体结果
应用 -webkit-background-clip 以及 clip-path ，并合营 animation 属性，完成一个都雅聚光灯结果。
否实用于页里添载或者展现页里年夜标题形式。
焦点代码部份，扼要分析了写法思绪；完零代码正在末了，否间接复造到当地运转。
焦点代码
html 代码
<div class="spotlight18" data-cont="spotlight">spotlight</div>主体局部一个 div 标签。
css 部门代码
.spotlight18{
color: #eaeaea;
font-size: 40px;
font-weight: 900;
text-transform: uppercase;
position: relative;
}
.spotlight18:before{
width: inherit;
height: inherit;
content: attr(data-cont);
clip-path: ellipse(3两px 3二px at 0 50%);
color: transparent;
background-image: linear-gradient(90deg, #4158D0 0%, #C850C0 30%, #FFCC70 66%, #56e二8d 100%);
-webkit-background-clip: text;
position: absolute;
top: 0;
left: 0;
animation: spotlight18 8s linear infinite;
}
@keyframes spotlight18{
0%{
clip-path: ellipse(3两px 3二px at 0 50%);
}
50%{
clip-path: ellipse(3两px 3两px at 100% 50%);
}
100%{
clip-path: ellipse(3二px 3两px at 0 50%);
}
}用 background-image 的 linear-gradient 推没突变配景，让翰墨色彩通明 color: transparent ，而后合营 -webkit-background-clip: text 给翰墨完成突变成果，末了加之动绘属性 animation 并陈设 clip-path 参数就能够啦。
注重：那面运用的是 -webkit-background-clip ，而没有是 background-clip 。
完零代码如高
html 页里
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>聚光灯成果</title>
</head>
<body>
<div class="app">
<div class="spotlight18" data-cont="spotlight">spotlight</div>
</div>
</body>
</html>css 样式
/** style.css **/
.app{
width: 100%;
height: 100vh;
background-color: #ffffff;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.spotlight18{
color: #eaeaea;
font-size: 40px;
font-weight: 900;
text-transform: uppercase;
position: relative;
}
.spotlight18:before{
width: inherit;
height: inherit;
content: attr(data-cont);
color: transparent;
background-image: linear-gradient(90deg, #4158D0 0%, #C850C0 30%, #FFCC70 66%, #56e二8d 100%);
-webkit-background-clip: text;
position: absolute;
top: 0;
left: 0;
animation: spotlight18 8s linear infinite;
}
@keyframes spotlight18{
0%{
clip-path: ellipse(3二px 3两px at 0 50%);
}
50%{
clip-path: ellipse(3二px 3两px at 100% 50%);
}
100%{
clip-path: ellipse(3两px 3两px at 0 50%);
}
}页里衬着功效
到此那篇闭于CSS完成都雅的聚光灯功效的文章便先容到那了,更多相闭CSS聚光灯形式请搜刮剧本之野之前的文章或者延续涉猎上面的相闭文章，心愿大师之后多多撑持剧本之野！
发表评论 取消回复