star-chart/style.css at main · kzy77/star-chart · GitHub

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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
@import url('https://fonts.cloudflare.com/css2?family=Orbitron:wght@400;700;900&display=swap');

* {
    margin: 0;
    padding: 0;
}

body {
    margin: 0;
    font-family: 'Orbitron', monospace;
    overflow: hidden;
    background: #0a0a1a; /* 深色后备背景 */
    position: relative;
}

/* Three.js画布增强 */
canvas {
    display: block;
    filter: brightness(0.9) contrast(1.0);
}

/* 星系背景动画 */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle at 20% 20%, rgba(138, 43, 226, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 60%, rgba(255, 20, 147, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 40% 70%, rgba(0, 191, 255, 0.1) 0%, transparent 50%);
    animation: galaxyRotate 60s linear infinite;
    pointer-events: none;
    z-index: -1;
}

/* 星星闪烁背景 */
body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(2px 2px at 20px 30px, #eee, transparent),
        radial-gradient(2px 2px at 40px 70px, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(1px 1px at 90px 40px, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(1px 1px at 130px 80px, rgba(255, 255, 255, 0.4), transparent),
        radial-gradient(2px 2px at 160px 30px, rgba(255, 255, 255, 0.9), transparent);
    background-repeat: repeat;
    background-size: 200px 100px;
    animation: sparkle 3s linear infinite;
    pointer-events: none;
    z-index: -1;
}

@keyframes galaxyRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes sparkle {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 0.3; }
}

/* 鼠标拖尾星星效果 */
.star-trail {
    position: fixed;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1000;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.9) 0%, transparent 70%);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
    animation: starFade 1s ease-out forwards;
}

@keyframes starFade {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(0.3);
    }
}

/* 全局发光效果增强 */
@keyframes globalGlow {
    0%, 100% {
        filter: brightness(1) saturate(1) drop-shadow(0 0 20px rgba(255, 215, 0, 0.3));
    }
    50% {
        filter: brightness(1.1) saturate(1.2) drop-shadow(0 0 30px rgba(255, 215, 0, 0.5));
    }
}

/* 粒子特效增强 */
.particle-enhanced {
    animation: globalGlow 4s ease-in-out infinite;
}

/* 响应式设计 */
@media (max-width: 768px) {
    body {
        font-size: 14px;
    }
}

#background-switcher button:hover {
    background: linear-gradient(135deg, #B19CD9, #663399);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* 新增：R18 开关样式 */
#r18-toggle {
    appearance: none;
    -webkit-appearance: none;
    width: 40px;
    height: 20px;
    background-color: #555;
    border-radius: 10px;
    position: relative;
    cursor: pointer;
    outline: none;
    transition: background-color 0.3s;
}

#r18-toggle::before {
    content: '';
    width: 16px;
    height: 16px;
    background-color: white;
    border-radius: 50%;
    position: absolute;
    top: 2px;
    left: 2px;
    transition: transform 0.3s;
}

#r18-toggle:checked {
    background-color: #FF69B4; /* R18激活时的颜色 */
}

#r18-toggle:checked::before {
    transform: translateX(20px);
}
/* 结束：R18 开关样式 */

.star-trail {
    position: absolute;
}