欢迎来到前端设计专栏，本专栏收藏了一些好看且实用的前端作品，使用简单的html、css语法打造创意有趣的作品，为网站加入更多高级创意的元素。
案例
文字聚光灯效果可以用于网站标题
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="聚光灯.css">
</head>
<body>
<div class="icon">
<div class="text">
<h2>星域VR</h2>
</div>
</div>
</body>
</html>
css
.icon .text {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.icon .text h2 {
font-size: 6rem;
color: #666;
position: relative;
color: #333;
}
.icon .text h2::after {
content: "星域VR";
position: absolute;
top: 0;
left: 0;
color: teal;
clip-path: ellipse(100px 100px at 0% center);
animation: animateText 5s infinite;
background-image: linear-gradient(60deg, #00d0ff, #4dff03, #ff0058, #ffbc00, #ff0058);
-webkit-background-clip: text;
color: transparent;
}
@keyframes animateText {
0%,
100% {
clip-path: ellipse(100px 100px at 0 center);
}
50% {
clip-path: ellipse(100px 100px at 100% center);
}
}
下期预告
加载动画