stellar-ui-v2 1.40.1 → 1.40.2

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.
package/README.md CHANGED
@@ -10,9 +10,9 @@
10
10
 
11
11
  ## ✨ 特性
12
12
 
13
- - 🎯 多平台覆盖,支持 微信小程序、支付宝小程序、H5.
14
- - 🚀 40+ 个高质量组件,覆盖移动端主流场景.
15
- - 📖 提供丰富的文档和组件示例.
13
+ - 🎯 多平台覆盖,支持 微信小程序、支付宝小程序、H5.
14
+ - 🚀 40+ 个高质量组件,覆盖移动端主流场景.
15
+ - 📖 提供丰富的文档和组件示例.
16
16
  - 🎨 支持修改 CSS 变量实现主题定制.
17
17
 
18
18
  ## 📱 预览
@@ -75,11 +75,11 @@ npm i stellar-ui-v2 -S
75
75
 
76
76
  ## 周边生态
77
77
 
78
- | 项目 | 描述 |
79
- | --- | --- |
80
- |[StellarUI-Plus](https://github.com/wuhanshuzhiyun/stellar-ui-plus) | 一个基于vue3构建,打造的uni-app组件库 |
81
- |[ste-vue-inset-loader](https://github.com/wuhanshuzhiyun/ste-vue-inset-loader) |常用于小程序需要全局引入组件的场景的包 |
82
- |[ste-helper](https://github.com/wuhanshuzhiyun/stellar-ui-plus/tree/main/plugins/ste-helper) |旨在帮助开发者更加有效率的使用 StellarUI-Plus来开发项目的vscode插件 |
78
+ | 项目 | 描述 |
79
+ | --- | --- |
80
+ |[StellarUI-Plus](https://github.com/wuhanshuzhiyun/stellar-ui-plus) | 一个基于vue3构建,打造的uni-app组件库 |
81
+ |[ste-vue-inset-loader](https://github.com/wuhanshuzhiyun/ste-vue-inset-loader) |常用于小程序需要全局引入组件的场景的包 |
82
+ |[ste-helper](https://github.com/wuhanshuzhiyun/stellar-ui-plus/tree/main/plugins/ste-helper) |旨在帮助开发者更加有效率的使用 StellarUI-Plus来开发项目的vscode插件 |
83
83
  |[ste-cli](https://github.com/wuhanshuzhiyun/ste-cli) |stellar配套的脚手架 |
84
84
 
85
85
  ## 核心团队
@@ -1,247 +1,247 @@
1
- // 横向抖动动画
2
- @keyframes shakeX {
3
- 0%,
4
- 100% {
5
- transform: translateX(0);
6
- }
7
-
8
- 10% {
9
- transform: translateX(-9px);
10
- }
11
-
12
- 20% {
13
- transform: translateX(8px);
14
- }
15
-
16
- 30% {
17
- transform: translateX(-7px);
18
- }
19
-
20
- 40% {
21
- transform: translateX(6px);
22
- }
23
-
24
- 50% {
25
- transform: translateX(-5px);
26
- }
27
-
28
- 60% {
29
- transform: translateX(4px);
30
- }
31
-
32
- 70% {
33
- transform: translateX(-3px);
34
- }
35
-
36
- 80% {
37
- transform: translateX(2px);
38
- }
39
-
40
- 90% {
41
- transform: translateX(-1px);
42
- }
43
- }
44
-
45
- // 竖向抖动动画
46
- @keyframes shakeY {
47
- 0%,
48
- 100% {
49
- transform: translateY(0);
50
- }
51
-
52
- 10% {
53
- transform: translateY(-9px);
54
- }
55
-
56
- 20% {
57
- transform: translateY(8px);
58
- }
59
-
60
- 30% {
61
- transform: translateY(-7px);
62
- }
63
-
64
- 40% {
65
- transform: translateY(6px);
66
- }
67
-
68
- 50% {
69
- transform: translateY(-5px);
70
- }
71
-
72
- 60% {
73
- transform: translateY(4px);
74
- }
75
-
76
- 70% {
77
- transform: translateY(-3px);
78
- }
79
-
80
- 80% {
81
- transform: translateY(2px);
82
- }
83
-
84
- 90% {
85
- transform: translateY(-1px);
86
- }
87
- }
88
-
89
- // 心跳
90
- @keyframes ripple {
91
- 0% {
92
- // box-shadow: 0 0.5em 0.5em rgba(0, 0, 0, 0.4);
93
-
94
- transform: scale(1);
95
- }
96
-
97
- 50% {
98
- // box-shadow: 0 1em 1em rgba(0, 0, 0, 0.4);
99
- transform: scale(1.1);
100
- }
101
- }
102
-
103
- // 呼吸
104
- @keyframes breath {
105
- 0% {
106
- transform: scale(1);
107
- }
108
-
109
- 50% {
110
- transform: scale(1.1);
111
- }
112
-
113
- 100% {
114
- transform: scale(1);
115
- }
116
- }
117
-
118
- // 右侧向左侧划入
119
- @keyframes slide-right {
120
- 0% {
121
- opacity: 0;
122
- transform: translateX(100%);
123
- }
124
-
125
- 100% {
126
- opacity: 1;
127
- transform: translateX(0);
128
- }
129
- }
130
-
131
- // 左侧向右侧划入
132
- @keyframes slide-left {
133
- 0% {
134
- opacity: 0;
135
- transform: translateX(-100%);
136
- }
137
-
138
- 100% {
139
- opacity: 1;
140
- transform: translateX(0);
141
- }
142
- }
143
-
144
- // 上面向下面划入
145
- @keyframes slide-top {
146
- 0% {
147
- opacity: 0;
148
- transform: translateY(-100%);
149
- }
150
-
151
- 100% {
152
- opacity: 1;
153
- transform: translateY(0);
154
- }
155
- }
156
-
157
- // 下面向上面划入
158
- @keyframes slide-bottom {
159
- 0% {
160
- opacity: 0;
161
- transform: translateY(100%);
162
- }
163
-
164
- 100% {
165
- opacity: 1;
166
- transform: translateY(0);
167
- }
168
- }
169
-
170
- // 漂浮 float
171
- @keyframes floatPop {
172
- 0% {
173
- top: 0;
174
- }
175
-
176
- 25% {
177
- top: 1px;
178
- }
179
-
180
- 50% {
181
- top: 4px;
182
- }
183
-
184
- 75% {
185
- top: 1px;
186
- }
187
-
188
- 100% {
189
- top: 0;
190
- }
191
- }
192
-
193
- // 跳跃
194
- @keyframes jump {
195
- 0% {
196
- transform: rotate(0deg) translateY(0);
197
- animation-timing-function: ease-in;
198
- }
199
-
200
- 25% {
201
- transform: rotate(10deg) translateY(20 * 1px);
202
- animation-timing-function: ease-out;
203
- }
204
-
205
- 50% {
206
- transform: rotate(0deg) translateY(-10 * 1px);
207
- animation-timing-function: ease-in;
208
- }
209
-
210
- 75% {
211
- transform: rotate(-10deg) translateY(20 * 1px);
212
- animation-timing-function: ease-out;
213
- }
214
-
215
- 100% {
216
- transform: rotate(0deg) translateY(0);
217
- animation-timing-function: ease-in;
218
- }
219
- }
220
-
221
- // 水波
222
- @keyframes twinkle {
223
- 0% {
224
- transform: scale(0);
225
- }
226
-
227
- 20% {
228
- opacity: 1;
229
- }
230
-
231
- 50%,
232
- 100% {
233
- opacity: 0;
234
- transform: scale(1.4);
235
- }
236
- }
237
-
238
- @keyframes flicker {
239
- 0% {
240
- transform: translateX(-100 * 1px) skewX(-20deg);
241
- }
242
-
243
- 40%,
244
- 100% {
245
- transform: translateX(150 * 1px) skewX(-20deg);
246
- }
247
- }
1
+ // 横向抖动动画
2
+ @keyframes shakeX {
3
+ 0%,
4
+ 100% {
5
+ transform: translateX(0);
6
+ }
7
+
8
+ 10% {
9
+ transform: translateX(-9px);
10
+ }
11
+
12
+ 20% {
13
+ transform: translateX(8px);
14
+ }
15
+
16
+ 30% {
17
+ transform: translateX(-7px);
18
+ }
19
+
20
+ 40% {
21
+ transform: translateX(6px);
22
+ }
23
+
24
+ 50% {
25
+ transform: translateX(-5px);
26
+ }
27
+
28
+ 60% {
29
+ transform: translateX(4px);
30
+ }
31
+
32
+ 70% {
33
+ transform: translateX(-3px);
34
+ }
35
+
36
+ 80% {
37
+ transform: translateX(2px);
38
+ }
39
+
40
+ 90% {
41
+ transform: translateX(-1px);
42
+ }
43
+ }
44
+
45
+ // 竖向抖动动画
46
+ @keyframes shakeY {
47
+ 0%,
48
+ 100% {
49
+ transform: translateY(0);
50
+ }
51
+
52
+ 10% {
53
+ transform: translateY(-9px);
54
+ }
55
+
56
+ 20% {
57
+ transform: translateY(8px);
58
+ }
59
+
60
+ 30% {
61
+ transform: translateY(-7px);
62
+ }
63
+
64
+ 40% {
65
+ transform: translateY(6px);
66
+ }
67
+
68
+ 50% {
69
+ transform: translateY(-5px);
70
+ }
71
+
72
+ 60% {
73
+ transform: translateY(4px);
74
+ }
75
+
76
+ 70% {
77
+ transform: translateY(-3px);
78
+ }
79
+
80
+ 80% {
81
+ transform: translateY(2px);
82
+ }
83
+
84
+ 90% {
85
+ transform: translateY(-1px);
86
+ }
87
+ }
88
+
89
+ // 心跳
90
+ @keyframes ripple {
91
+ 0% {
92
+ // box-shadow: 0 0.5em 0.5em rgba(0, 0, 0, 0.4);
93
+
94
+ transform: scale(1);
95
+ }
96
+
97
+ 50% {
98
+ // box-shadow: 0 1em 1em rgba(0, 0, 0, 0.4);
99
+ transform: scale(1.1);
100
+ }
101
+ }
102
+
103
+ // 呼吸
104
+ @keyframes breath {
105
+ 0% {
106
+ transform: scale(1);
107
+ }
108
+
109
+ 50% {
110
+ transform: scale(1.1);
111
+ }
112
+
113
+ 100% {
114
+ transform: scale(1);
115
+ }
116
+ }
117
+
118
+ // 右侧向左侧划入
119
+ @keyframes slide-right {
120
+ 0% {
121
+ opacity: 0;
122
+ transform: translateX(100%);
123
+ }
124
+
125
+ 100% {
126
+ opacity: 1;
127
+ transform: translateX(0);
128
+ }
129
+ }
130
+
131
+ // 左侧向右侧划入
132
+ @keyframes slide-left {
133
+ 0% {
134
+ opacity: 0;
135
+ transform: translateX(-100%);
136
+ }
137
+
138
+ 100% {
139
+ opacity: 1;
140
+ transform: translateX(0);
141
+ }
142
+ }
143
+
144
+ // 上面向下面划入
145
+ @keyframes slide-top {
146
+ 0% {
147
+ opacity: 0;
148
+ transform: translateY(-100%);
149
+ }
150
+
151
+ 100% {
152
+ opacity: 1;
153
+ transform: translateY(0);
154
+ }
155
+ }
156
+
157
+ // 下面向上面划入
158
+ @keyframes slide-bottom {
159
+ 0% {
160
+ opacity: 0;
161
+ transform: translateY(100%);
162
+ }
163
+
164
+ 100% {
165
+ opacity: 1;
166
+ transform: translateY(0);
167
+ }
168
+ }
169
+
170
+ // 漂浮 float
171
+ @keyframes floatPop {
172
+ 0% {
173
+ top: 0;
174
+ }
175
+
176
+ 25% {
177
+ top: 1px;
178
+ }
179
+
180
+ 50% {
181
+ top: 4px;
182
+ }
183
+
184
+ 75% {
185
+ top: 1px;
186
+ }
187
+
188
+ 100% {
189
+ top: 0;
190
+ }
191
+ }
192
+
193
+ // 跳跃
194
+ @keyframes jump {
195
+ 0% {
196
+ transform: rotate(0deg) translateY(0);
197
+ animation-timing-function: ease-in;
198
+ }
199
+
200
+ 25% {
201
+ transform: rotate(10deg) translateY(20 * 1px);
202
+ animation-timing-function: ease-out;
203
+ }
204
+
205
+ 50% {
206
+ transform: rotate(0deg) translateY(-10 * 1px);
207
+ animation-timing-function: ease-in;
208
+ }
209
+
210
+ 75% {
211
+ transform: rotate(-10deg) translateY(20 * 1px);
212
+ animation-timing-function: ease-out;
213
+ }
214
+
215
+ 100% {
216
+ transform: rotate(0deg) translateY(0);
217
+ animation-timing-function: ease-in;
218
+ }
219
+ }
220
+
221
+ // 水波
222
+ @keyframes twinkle {
223
+ 0% {
224
+ transform: scale(0);
225
+ }
226
+
227
+ 20% {
228
+ opacity: 1;
229
+ }
230
+
231
+ 50%,
232
+ 100% {
233
+ opacity: 0;
234
+ transform: scale(1.4);
235
+ }
236
+ }
237
+
238
+ @keyframes flicker {
239
+ 0% {
240
+ transform: translateX(-100 * 1px) skewX(-20deg);
241
+ }
242
+
243
+ 40%,
244
+ 100% {
245
+ transform: translateX(150 * 1px) skewX(-20deg);
246
+ }
247
+ }