<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
.star-wrap {
--color: rgb(255, 255, 0);
--color2: rgba(255, 255, 0, 0.4);
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
filter: drop-shadow(0px 0px 20px var(--color));
width: 100px;
height: 100px;
}
.star-main {
width: inherit;
height: inherit;
position: absolute;
left: 0;
top: 0;
background-color: var(--color2);
clip-path: polygon(
100% 0,
55% 53%,
100% 100%,
51% 57%,
0 100%,
47% 53%,
0 0,
51% 49%
);
}
.star-second {
width: 80%;
height: 80%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: radial-gradient(var(--color2), transparent 70%);
clip-path: polygon(
100% 49%,
57% 58%,
51% 100%,
44% 58%,
0 51%,
44% 45%,
50% 0,
56% 45%
);
}
.star-center {
width: 20%;
height: 20%;
border-radius: 50%;
background-image: radial-gradient(var(--color), transparent);
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 0 10px 10px var(--color2);
}
</style>
</head>
<body>
<div class="star-wrap">
<div class="star-main"></div>
<div class="star-second"></div>
<div class="star-center"></div>
</div>
</body>
</html>
