1+ .solo-kanbanniang {
2+ position : fixed;
3+ bottom : 0 ;
4+ left : 0 ;
5+ }
6+
7+ .solo-kanbanniang : hover .solo-kanbanniang__tool {
8+ display : block;
9+ }
10+
11+ .solo-kanbanniang svg {
12+ fill : currentColor;
13+ display : inline-block;
14+ stroke-width : 0 ;
15+ stroke : currentColor;
16+ width : 18px ;
17+ height : 18px ;
18+ color : # 3b3e43 ;
19+ margin-bottom : 10px ;
20+ cursor : pointer;
21+ }
22+
23+ .solo-kanbanniang svg : hover {
24+ color : # 4285f4 ;
25+ }
26+
27+ .solo-kanbanniang__tool {
28+ position : absolute;
29+ top : 23px ;
30+ width : 18px ;
31+ right : 10px ;
32+ display : none;
33+ }
34+
35+ .solo-kanbanniang__tip {
36+ opacity : 0 ;
37+ width : 260px ;
38+ margin : 0 10px ;
39+ padding : 10px ;
40+ border-radius : 5px ;
41+ background-color : rgba (241 , 247 , 254 , 0.8 );
42+ box-shadow : 0 1px 2px rgba (0 , 0 , 0 , .2 );
43+ font-size : 14px ;
44+ text-overflow : ellipsis;
45+ overflow : hidden;
46+ position : absolute;
47+ animation-delay : 5s ;
48+ animation-duration : 50s ;
49+ animation-iteration-count : infinite;
50+ animation-name : kanbanniangshake;
51+ animation-timing-function : ease-in-out;
52+ box-sizing : border-box;
53+ color : rgba (0 , 0 , 0 , .54 );
54+ }
55+
56+ @keyframes kanbanniangshake {
57+ 2% {
58+ transform : translate (0.5px , -1.5px ) rotate (-0.5deg );
59+ }
60+
61+ 4% {
62+ transform : translate (0.5px , 1.5px ) rotate (1.5deg );
63+ }
64+
65+ 6% {
66+ transform : translate (1.5px , 1.5px ) rotate (1.5deg );
67+ }
68+
69+ 8% {
70+ transform : translate (2.5px , 1.5px ) rotate (0.5deg );
71+ }
72+
73+ 10% {
74+ transform : translate (0.5px , 2.5px ) rotate (0.5deg );
75+ }
76+
77+ 12% {
78+ transform : translate (1.5px , 1.5px ) rotate (0.5deg );
79+ }
80+
81+ 14% {
82+ transform : translate (0.5px , 0.5px ) rotate (0.5deg );
83+ }
84+
85+ 16% {
86+ transform : translate (-1.5px , -0.5px ) rotate (1.5deg );
87+ }
88+
89+ 18% {
90+ transform : translate (0.5px , 0.5px ) rotate (1.5deg );
91+ }
92+
93+ 20% {
94+ transform : translate (2.5px , 2.5px ) rotate (1.5deg );
95+ }
96+
97+ 22% {
98+ transform : translate (0.5px , -1.5px ) rotate (1.5deg );
99+ }
100+
101+ 24% {
102+ transform : translate (-1.5px , 1.5px ) rotate (-0.5deg );
103+ }
104+
105+ 26% {
106+ transform : translate (1.5px , 0.5px ) rotate (1.5deg );
107+ }
108+
109+ 28% {
110+ transform : translate (-0.5px , -0.5px ) rotate (-0.5deg );
111+ }
112+
113+ 30% {
114+ transform : translate (1.5px , -0.5px ) rotate (-0.5deg );
115+ }
116+
117+ 32% {
118+ transform : translate (2.5px , -1.5px ) rotate (1.5deg );
119+ }
120+
121+ 34% {
122+ transform : translate (2.5px , 2.5px ) rotate (-0.5deg );
123+ }
124+
125+ 36% {
126+ transform : translate (0.5px , -1.5px ) rotate (0.5deg );
127+ }
128+
129+ 38% {
130+ transform : translate (2.5px , -0.5px ) rotate (-0.5deg );
131+ }
132+
133+ 40% {
134+ transform : translate (-0.5px , 2.5px ) rotate (0.5deg );
135+ }
136+
137+ 42% {
138+ transform : translate (-1.5px , 2.5px ) rotate (0.5deg );
139+ }
140+
141+ 44% {
142+ transform : translate (-1.5px , 1.5px ) rotate (0.5deg );
143+ }
144+
145+ 46% {
146+ transform : translate (1.5px , -0.5px ) rotate (-0.5deg );
147+ }
148+
149+ 48% {
150+ transform : translate (2.5px , -0.5px ) rotate (0.5deg );
151+ }
152+
153+ 50% {
154+ transform : translate (-1.5px , 1.5px ) rotate (0.5deg );
155+ }
156+
157+ 52% {
158+ transform : translate (-0.5px , 1.5px ) rotate (0.5deg );
159+ }
160+
161+ 54% {
162+ transform : translate (-1.5px , 1.5px ) rotate (0.5deg );
163+ }
164+
165+ 56% {
166+ transform : translate (0.5px , 2.5px ) rotate (1.5deg );
167+ }
168+
169+ 58% {
170+ transform : translate (2.5px , 2.5px ) rotate (0.5deg );
171+ }
172+
173+ 60% {
174+ transform : translate (2.5px , -1.5px ) rotate (1.5deg );
175+ }
176+
177+ 62% {
178+ transform : translate (-1.5px , 0.5px ) rotate (1.5deg );
179+ }
180+
181+ 64% {
182+ transform : translate (-1.5px , 1.5px ) rotate (1.5deg );
183+ }
184+
185+ 66% {
186+ transform : translate (0.5px , 2.5px ) rotate (1.5deg );
187+ }
188+
189+ 68% {
190+ transform : translate (2.5px , -1.5px ) rotate (1.5deg );
191+ }
192+
193+ 70% {
194+ transform : translate (2.5px , 2.5px ) rotate (0.5deg );
195+ }
196+
197+ 72% {
198+ transform : translate (-0.5px , -1.5px ) rotate (1.5deg );
199+ }
200+
201+ 74% {
202+ transform : translate (-1.5px , 2.5px ) rotate (1.5deg );
203+ }
204+
205+ 76% {
206+ transform : translate (-1.5px , 2.5px ) rotate (1.5deg );
207+ }
208+
209+ 78% {
210+ transform : translate (-1.5px , 2.5px ) rotate (0.5deg );
211+ }
212+
213+ 80% {
214+ transform : translate (-1.5px , 0.5px ) rotate (-0.5deg );
215+ }
216+
217+ 82% {
218+ transform : translate (-1.5px , 0.5px ) rotate (-0.5deg );
219+ }
220+
221+ 84% {
222+ transform : translate (-0.5px , 0.5px ) rotate (1.5deg );
223+ }
224+
225+ 86% {
226+ transform : translate (2.5px , 1.5px ) rotate (0.5deg );
227+ }
228+
229+ 88% {
230+ transform : translate (-1.5px , 0.5px ) rotate (1.5deg );
231+ }
232+
233+ 90% {
234+ transform : translate (-1.5px , -0.5px ) rotate (-0.5deg );
235+ }
236+
237+ 92% {
238+ transform : translate (-1.5px , -1.5px ) rotate (1.5deg );
239+ }
240+
241+ 94% {
242+ transform : translate (0.5px , 0.5px ) rotate (-0.5deg );
243+ }
244+
245+ 96% {
246+ transform : translate (2.5px , -0.5px ) rotate (-0.5deg );
247+ }
248+
249+ 98% {
250+ transform : translate (-1.5px , -1.5px ) rotate (-0.5deg );
251+ }
252+
253+ 0% , 100% {
254+ transform : translate (0 , 0 ) rotate (0 );
255+ }
256+ }
0 commit comments