本代码由HTML和CSS组成
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>name</title>
</head>
<style>
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.2rem;
position: relative;
}
h1::after{
content: attr(data-spotlight);
color: transparent;
position: absolute;
left: 0;
top: 0;
-webkit-clip-path: ellipse(100px 100px at 0% 50%);
clip-path: ellipse(100px 100px at 0% 50%);
animation: spotlight 6s infinite;
background-image: url(https://i.loli.net/2020/03/22/OhAmBwFYpfe25sL.jpg);
background-size: 150%;
background-position: center center;
-webkit-background-clip: text;
background-clip: text;
}
@keyframes spotlight {
0% {
-webkit-clip-path: ellipse(100px 100px at 00% 50%);
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 00% 50%);
clip-path: ellipse(100px 100px at 0% 50%);
}
}
</style>
<body>
<h1 data-spotlight="请在这里输入你想输入的文字">←←请在这里输入您在左边输入的文字（要和之前一样）</h1>
</body>
</html>
扫一扫
2531
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
