@@ -30,145 +30,6 @@ body {
3030 );
3131}
3232
33- @keyframes topBubbles {
34- 0% {
35- background-position :
36- 5% 90% ,
37- 10% 90% ,
38- 10% 90% ,
39- 15% 90% ,
40- 25% 90% ,
41- 25% 90% ,
42- 40% 90% ,
43- 55% 90% ,
44- 70% 90% ;
45- }
46-
47- 50% {
48- background-position :
49- 0% 80% ,
50- 0% 20% ,
51- 10% 40% ,
52- 20% 0% ,
53- 30% 30% ,
54- 22% 50% ,
55- 50% 50% ,
56- 65% 20% ,
57- 90% 30% ;
58- }
59-
60- 100% {
61- background-position :
62- 0% 70% ,
63- 0% 10% ,
64- 10% 30% ,
65- 20% -10% ,
66- 30% 20% ,
67- 22% 40% ,
68- 50% 40% ,
69- 65% 10% ,
70- 90% 20% ;
71- background-size : 0% 0% , 0% 0% , 0% 0% , 0% 0% , 0% 0% , 0% 0% ;
72- }
73- }
74-
75- @keyframes bottomBubbles {
76- 0% {
77- background-position :
78- 10% -10% ,
79- 30% 10% ,
80- 55% -10% ,
81- 70% -10% ,
82- 85% -10% ,
83- 70% -10% ,
84- 70% 0% ;
85- }
86-
87- 50% {
88- background-position :
89- 0% 80% ,
90- 20% 80% ,
91- 45% 60% ,
92- 60% 100% ,
93- 75% 70% ,
94- 95% 60% ,
95- 105% 0% ;
96- }
97-
98- 100% {
99- background-position :
100- 0% 90% ,
101- 20% 90% ,
102- 45% 70% ,
103- 60% 110% ,
104- 75% 80% ,
105- 95% 70% ,
106- 110% 10% ;
107- background-size : 0% 0% , 0% 0% , 0% 0% , 0% 0% , 0% 0% , 0% 0% ;
108- }
109- }
110-
111- .sparkling-btn {
112- @apply relative inline-block px-6 py-3 rounded-lg border-none text-white
113- cursor-pointer bg-[# 4ca4ca ] transition-all duration-[0.2s ];
114- transition-timing-function : ease;
115- & : active {
116- transform : scale (0.95 );
117- }
118- & ::before , & ::after {
119- @apply absolute content-["" ] w-[150% ] left-[50% ] h-full translate-x-[-50% ]
120- z-[-1000 ] bg-no-repeat;
121- }
122- & : hover {
123- & ::before {
124- top : -70% ;
125- background-image :
126- radial-gradient (circle, # 4ca4ca 20% , transparent 20% ),
127- radial-gradient (circle, transparent 20% , # 4ca4ca 20% , transparent 30% ),
128- radial-gradient (circle, # 4ca4ca 20% , transparent 20% ),
129- radial-gradient (circle, # 4ca4ca 20% , transparent 20% ),
130- radial-gradient (circle, transparent 10% , # 4ca4ca 15% , transparent 20% ),
131- radial-gradient (circle, # 4ca4ca 20% , transparent 20% ),
132- radial-gradient (circle, # 4ca4ca 20% , transparent 20% ),
133- radial-gradient (circle, # 4ca4ca 20% , transparent 20% ),
134- radial-gradient (circle, # 4ca4ca 20% , transparent 20% );
135- background-size :
136- 10% 10% ,
137- 20% 20% ,
138- 15% 15% ,
139- 20% 20% ,
140- 18% 18% ,
141- 10% 10% ,
142- 15% 15% ,
143- 10% 10% ,
144- 18% 18% ;
145- background-position : 50% 120% ;
146- animation : topBubbles 0.6s ease;
147- }
148- & ::after {
149- bottom : -70% ;
150- background-image :
151- radial-gradient (circle, # 4ca4ca 20% , transparent 20% ),
152- radial-gradient (circle, # 4ca4ca 20% , transparent 20% ),
153- radial-gradient (circle, transparent 10% , # 4ca4ca 15% , transparent 20% ),
154- radial-gradient (circle, # 4ca4ca 20% , transparent 20% ),
155- radial-gradient (circle, # 4ca4ca 20% , transparent 20% ),
156- radial-gradient (circle, # 4ca4ca 20% , transparent 20% ),
157- radial-gradient (circle, # 4ca4ca 20% , transparent 20% );
158- background-size :
159- 15% 15% ,
160- 20% 20% ,
161- 18% 18% ,
162- 20% 20% ,
163- 15% 15% ,
164- 20% 20% ,
165- 18% 18% ;
166- background-position : 50% 0% ;
167- animation : bottomBubbles 0.6s ease;
168- }
169- }
170- }
171-
17233.card {
17334 @apply border-solid border-[0.1px ] transition-colors ease-in duration-[0.2s ];
17435 border-color : rgba (129 , 129 , 129 , 0.19 );
0 commit comments