霓虹灯
coderljw 2024-10-13 小于 1 分钟
<main>
<span>Magic</span>
</main>
1
2
3
2
3
main {
height: 400px;
background: #000;
display: grid;
place-items: center;
}
span {
font-family: 'Lobster';
font-size: 10vmin;
text-align: center;
cursor: pointer;
letter-spacing: 4px;
user-select: none;
color: #fff;
filter: brightness(110%); /* 亮度 */
text-shadow: 0 0 5px var(--color-white), 0 0 10px var(--color-white),
0 0 15px var(--color-white), 0 0 20px var(--color-red),
0 0 35px var(--color-red), 0 0 40px var(--color-red),
0 0 50px var(--color-red), 0 0 75px var(--color-red);
--color-white: #fff;
--color-red: #e91e63;
}
span:hover {
color: var(--color-white);
animation: neon 1.5s ease-in-out infinite alternate;
}
@keyframes neon {
to {
text-shadow: 0 0 10px var(--color-white), 0 0 20px var(--color-white),
0 0 30px var(--color-white), 0 0 40px var(--color-red),
0 0 70px var(--color-red), 0 0 80px var(--color-red),
0 0 100px var(--color-red), 0 0 150px var(--color-red);
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<main>
<section></section>
</main>
1
2
3
2
3
main {
height: 400px;
display: grid;
place-items: center;
background: #000;
}
section {
width: 200px;
height: 200px;
position: relative;
}
section::before,
section::after {
content: ' ';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
border-radius: 50%;
border-top: 10px solid #fff;
filter: drop-shadow(0 0 2px var(--colorA)) drop-shadow(0 0 5px var(--colorA))
drop-shadow(0 0 10px var(--colorA)) drop-shadow(0 0 20px var(--colorA));
animation: rotate 3s infinite linear;
}
section::before {
--colorA: #b78eff;
}
section::after {
--colorA: #ffec41;
animation-delay: -1.5s;
}
@keyframes rotate {
100% {
transform: rotate(360deg);
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
