ino-cesium 0.0.17-beta.3 → 0.0.17
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -0,0 +1,260 @@
|
|
|
1
|
+
/* 悬浮指示牌容器 */
|
|
2
|
+
.indicator {
|
|
3
|
+
position: relative;
|
|
4
|
+
width: 280px;
|
|
5
|
+
height: 240px;
|
|
6
|
+
animation: float 4s ease-in-out infinite;
|
|
7
|
+
display: flex;
|
|
8
|
+
left: -90px;
|
|
9
|
+
}
|
|
10
|
+
.indicator-left {
|
|
11
|
+
width: 140px;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.indicator-right {
|
|
15
|
+
flex: 1;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
/* 顶部圆形图标 */
|
|
19
|
+
.icon-circle {
|
|
20
|
+
position: absolute;
|
|
21
|
+
top: 70px;
|
|
22
|
+
left: 60px;
|
|
23
|
+
width: 60px;
|
|
24
|
+
height: 60px;
|
|
25
|
+
border-radius: 50%;
|
|
26
|
+
padding: 2px;
|
|
27
|
+
border: 2px solid #99ddff;
|
|
28
|
+
/* background: rgba(15, 23, 42, 0.8); */
|
|
29
|
+
box-shadow: 0 0 15px #99ddff,
|
|
30
|
+
0 0 30px rgba(153, 221, 255, 0.3),
|
|
31
|
+
inset 0 0 10px rgba(153, 221, 255, 0.5);
|
|
32
|
+
display: flex;
|
|
33
|
+
justify-content: center;
|
|
34
|
+
align-items: center;
|
|
35
|
+
z-index: 20;
|
|
36
|
+
animation: pulse 2s ease-in-out infinite;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
/* 图标 */
|
|
40
|
+
.icon {
|
|
41
|
+
width: 100%;
|
|
42
|
+
height: 100%;
|
|
43
|
+
background-size: contain;
|
|
44
|
+
animation: icon-glow 3s ease-in-out infinite;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
/* 连接到主体的线条 */
|
|
48
|
+
.connector-to-body {
|
|
49
|
+
position: absolute;
|
|
50
|
+
top: 100px;
|
|
51
|
+
left: 120px;
|
|
52
|
+
width: 20px;
|
|
53
|
+
height: 2px;
|
|
54
|
+
background: linear-gradient(to right, #99ddff, rgba(153, 221, 255, 0.3));
|
|
55
|
+
box-shadow: 0 0 10px rgba(153, 221, 255, 0.5);
|
|
56
|
+
z-index: 15;
|
|
57
|
+
animation: line-pulse 1.5s ease-in-out infinite;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
/* 信息牌主体 */
|
|
61
|
+
.info-body {
|
|
62
|
+
position: absolute;
|
|
63
|
+
pointer-events: all;
|
|
64
|
+
cursor: pointer;
|
|
65
|
+
top: 80px;
|
|
66
|
+
left: 140px;
|
|
67
|
+
width: calc(100% - 140px);
|
|
68
|
+
height: 40px;
|
|
69
|
+
background: linear-gradient(90deg, rgba(153, 221, 255, 0.2), rgba(75, 136, 255, 0.2));
|
|
70
|
+
border-radius: 8px;
|
|
71
|
+
border: 1px solid rgba(153, 221, 255, 0.3);
|
|
72
|
+
box-shadow: 0 0 15px rgba(153, 221, 255, 0.3),
|
|
73
|
+
inset 0 0 5px rgba(153, 221, 255, 0.2);
|
|
74
|
+
backdrop-filter: blur(4px);
|
|
75
|
+
display: flex;
|
|
76
|
+
justify-content: center;
|
|
77
|
+
align-items: center;
|
|
78
|
+
z-index: 10;
|
|
79
|
+
overflow: hidden;
|
|
80
|
+
padding: 0px 10px;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
/* 信息牌内部遮罩 */
|
|
84
|
+
.info-body::after {
|
|
85
|
+
content: '';
|
|
86
|
+
position: absolute;
|
|
87
|
+
inset: 2px;
|
|
88
|
+
background: linear-gradient(90deg, rgba(153, 221, 255, 0.2), rgba(75, 136, 255, 0.2));
|
|
89
|
+
border-radius: 6px;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
/* 文本 */
|
|
93
|
+
.info-text {
|
|
94
|
+
color: #e0f2fe;
|
|
95
|
+
font-weight: bold;
|
|
96
|
+
letter-spacing: 1px;
|
|
97
|
+
text-shadow: 0 0 5px rgba(153, 221, 255, 0.7);
|
|
98
|
+
z-index: 1;
|
|
99
|
+
animation: text-fade 2s ease-in-out infinite;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
/* 底部连接线 */
|
|
103
|
+
.connector {
|
|
104
|
+
position: absolute;
|
|
105
|
+
top: 130px;
|
|
106
|
+
left: 90px;
|
|
107
|
+
width: 2px;
|
|
108
|
+
height: 80px;
|
|
109
|
+
background: linear-gradient(to bottom, #99ddff, rgba(153, 221, 255, 0.3));
|
|
110
|
+
box-shadow: 0 0 10px rgba(153, 221, 255, 0.5);
|
|
111
|
+
z-index: 5;
|
|
112
|
+
animation: connector-pulse 2s ease-in-out infinite;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
/* 底部核心圆环（固定层） */
|
|
116
|
+
.base-ring {
|
|
117
|
+
position: absolute;
|
|
118
|
+
top: 210px;
|
|
119
|
+
left: 64px;
|
|
120
|
+
width: 60px;
|
|
121
|
+
height: 15px;
|
|
122
|
+
border-radius: 50%;
|
|
123
|
+
border: 1px solid rgba(153, 221, 255, 0.6);
|
|
124
|
+
box-shadow: 0 0 10px rgba(153, 221, 255, 0.4);
|
|
125
|
+
z-index: 10;
|
|
126
|
+
animation: ring-pulse 3s ease-in-out infinite;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
/* 扩散圆环 - 恢复动画效果 */
|
|
130
|
+
.ring-1, .ring-2, .ring-3 {
|
|
131
|
+
position: absolute;
|
|
132
|
+
top: 210px;
|
|
133
|
+
left: 64px;
|
|
134
|
+
width: 60px;
|
|
135
|
+
height: 15px;
|
|
136
|
+
border-radius: 50%;
|
|
137
|
+
border: 1px solid rgba(153, 221, 255, 0.3);
|
|
138
|
+
z-index: 1;
|
|
139
|
+
animation: ring-expand 6s infinite;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
.ring-1 {
|
|
143
|
+
animation-delay: 0s;
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
.ring-2 {
|
|
147
|
+
animation-delay: 2s;
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
.ring-3 {
|
|
151
|
+
animation-delay: 4s;
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
/* 底部光晕 - 恢复动画效果 */
|
|
155
|
+
.base-glow {
|
|
156
|
+
position: absolute;
|
|
157
|
+
top: 205px;
|
|
158
|
+
left: 64px;
|
|
159
|
+
width: 80px;
|
|
160
|
+
height: 30px;
|
|
161
|
+
border-radius: 50%;
|
|
162
|
+
background: radial-gradient(circle, rgba(153, 221, 255, 0.15) 0%, transparent 70%);
|
|
163
|
+
z-index: 5;
|
|
164
|
+
animation: pulse 3s ease-in-out infinite;
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
/* 悬浮动画 */
|
|
168
|
+
@keyframes float {
|
|
169
|
+
0%, 100% {
|
|
170
|
+
transform: translateY(0);
|
|
171
|
+
}
|
|
172
|
+
50% {
|
|
173
|
+
transform: translateY(-10px);
|
|
174
|
+
}
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
/* 呼吸动画 */
|
|
178
|
+
@keyframes pulse {
|
|
179
|
+
0%, 100% {
|
|
180
|
+
opacity: 1;
|
|
181
|
+
}
|
|
182
|
+
50% {
|
|
183
|
+
opacity: 0.7;
|
|
184
|
+
}
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
/* 圆环扩散动画 */
|
|
188
|
+
@keyframes ring-expand {
|
|
189
|
+
0% {
|
|
190
|
+
transform: scale(1);
|
|
191
|
+
opacity: 1;
|
|
192
|
+
}
|
|
193
|
+
100% {
|
|
194
|
+
transform: scale(2.5);
|
|
195
|
+
opacity: 0;
|
|
196
|
+
}
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
/* 连接线脉冲动画 */
|
|
200
|
+
@keyframes line-pulse {
|
|
201
|
+
0%, 100% {
|
|
202
|
+
box-shadow: 0 0 10px rgba(153, 221, 255, 0.5);
|
|
203
|
+
opacity: 0.8;
|
|
204
|
+
}
|
|
205
|
+
50% {
|
|
206
|
+
box-shadow: 0 0 15px rgba(153, 221, 255, 0.8);
|
|
207
|
+
opacity: 1;
|
|
208
|
+
}
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
/* 图标发光动画 */
|
|
212
|
+
@keyframes icon-glow {
|
|
213
|
+
0%, 100% {
|
|
214
|
+
transform: scale(1);
|
|
215
|
+
}
|
|
216
|
+
50% {
|
|
217
|
+
transform: scale(1.1);
|
|
218
|
+
}
|
|
219
|
+
}
|
|
220
|
+
|
|
221
|
+
/* 信息牌内部旋转动画 */
|
|
222
|
+
@keyframes rotate {
|
|
223
|
+
100% {
|
|
224
|
+
transform: rotate(1turn);
|
|
225
|
+
}
|
|
226
|
+
}
|
|
227
|
+
|
|
228
|
+
/* 文本淡入淡出动画 */
|
|
229
|
+
@keyframes text-fade {
|
|
230
|
+
0%, 100% {
|
|
231
|
+
color: #e0f2fe;
|
|
232
|
+
text-shadow: 0 0 5px rgba(153, 221, 255, 0.7);
|
|
233
|
+
}
|
|
234
|
+
50% {
|
|
235
|
+
color: #99ddff;
|
|
236
|
+
text-shadow: 0 0 8px rgba(153, 221, 255, 0.9);
|
|
237
|
+
}
|
|
238
|
+
}
|
|
239
|
+
|
|
240
|
+
/* 连接线脉冲动画 */
|
|
241
|
+
@keyframes connector-pulse {
|
|
242
|
+
0%, 100% {
|
|
243
|
+
background: linear-gradient(to bottom, #99ddff, rgba(153, 221, 255, 0.3));
|
|
244
|
+
box-shadow: 0 0 10px rgba(153, 221, 255, 0.5);
|
|
245
|
+
}
|
|
246
|
+
50% {
|
|
247
|
+
background: linear-gradient(to bottom, #99ddff, rgba(153, 221, 255, 0.5));
|
|
248
|
+
box-shadow: 0 0 15px rgba(153, 221, 255, 0.8);
|
|
249
|
+
}
|
|
250
|
+
}
|
|
251
|
+
|
|
252
|
+
/* 核心圆环脉冲动画 */
|
|
253
|
+
@keyframes ring-pulse {
|
|
254
|
+
0%, 100% {
|
|
255
|
+
box-shadow: 0 0 10px rgba(153, 221, 255, 0.4);
|
|
256
|
+
}
|
|
257
|
+
50% {
|
|
258
|
+
box-shadow: 0 0 15px rgba(153, 221, 255, 0.6);
|
|
259
|
+
}
|
|
260
|
+
}
|