先上效果:
HTML+CSS:聚光灯文字特效
技术难点
1.clip-path属性:是通过定义裁剪区域来决定目标元素哪个区域可见,哪个区域不可见。通过移动裁剪区域,就可以得到聚光灯移动的效果。
HTML代码演示:
<body>
<h1>美香一家还好吗?</h1>
</body>
CSS代码演示:
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
}
body{
height:100vh;
display:flex;
justify-content:center;
align-items:center;
background-color:rgba(0,0,0,0.99);
}
h1{
position:relative;
color:rgba(37, 32, 32, 0.4);
font-size:50px;
}
h1::after{
content:"美香一家还好吗?";
position:absolute;
top:0;
left:0;
color:transparent;
background-image:linear-gradient(to left,rgb(26, 11, 230),rgb(152, 233, 23),rgb(226, 35, 169),rgb(71, 199, 231),rgb(136, 145, 19));
background-clip:text;
-webkit-background-clip:text;
clip-path:circle(80px at 0% 50%);
animation:move 3s linear alternate infinite;
}
@keyframes move{
0%{
clip-path:circle(60px at 0% 50%);
}
100%{
clip-path:circle(60px at 100% 50%);
}
}
</style>