css聚光灯效果
看看效果：
HTML代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="index.css"/>
</head>
<body>
<h1 data-spotline="CodingStartup!">CodingStartup</h1>
</body>
</html>
css代码：
html{
font-size: 15px;
}
body{
background-color: #222;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
h1{
color: #333;
font-family: helvetica;
margin: 0;
padding: 0;
font-size: 8rem;
letter-spacing: -0.3rem;
position: relative;
}
h1::after{
content: attr(data-spotline);
color: transparent;
position: absolute;
top: 0;
left: 0;
-webkit-clip-path: ellipse(100px 100px at 0% 50%) ;
clip-path: ellipse(100px 100px at 0% 50%) ;
animation: spotlight 4s linear infinite;
background-image: url(https://imglf4.lf127.net/img/MkQrTXB3T3JXVzdZeU5MZFdCaEJOajc3THpHT0lZdUNXcEh1RzZEM1cyY3V1NlpQWHlYKzJRPT0.jpg?imageView&thumbnail=1680x0&quality=96&stripmeta=0&type=jpg);
background-size: 150%;
background-position: center center;
background-clip: text;
//仅给文本填充颜色背景
-webkit-background-clip: text;
}
@keyframes spotlight{
0%{
-webkit-clip-path: ellipse(100px 100px at 0% 50%) ;
/*椭圆形ellipse（长、短轴半径at圆心坐标）*/
clip-path: ellipse(100px 100px at 0% 50%) ;
}50%{
-webkit-clip-path: ellipse(100px 100px at 100% 50%) ;
clip-path: ellipse(100px 100px at 100% 50%) ;
}100%{
-webkit-clip-path: ellipse(100px 100px at 0% 50%) ;
clip-path: ellipse(100px 100px at 0% 50%) ;
}
}
总结：
1、attr()函数：
attr()函数返回所选元素的属性值。使用 attr(attribute-name)
2、clip-path:裁剪元素的形状
clip-path CSS 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏