Skip to content

Commit c09bb20

Browse files
pphatdevpphatdev
committed
🎉: Update Styles
1 parent ed74cef commit c09bb20

1 file changed

Lines changed: 243 additions & 1 deletion

File tree

‎src/style/app.css‎

Lines changed: 243 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,245 @@
11
@tailwind base;
2+
@tailwind utilities;
23
@tailwind components;
3-
@tailwind utilities;
4+
5+
@tailwind base;
6+
@tailwind utilities;
7+
@tailwind components;
8+
9+
@layer base {
10+
* {
11+
@apply font-body;
12+
scrollbar-width: thin;
13+
}
14+
15+
p>a {
16+
@apply hover:underline text-primary font-medium
17+
}
18+
19+
@keyframes jumbo {
20+
from {
21+
background-position: 50% 50%, 50% 50%;
22+
}
23+
to {
24+
background-position: 350% 50%, 350% 50%;
25+
}
26+
}
27+
.dark .jumbo {
28+
background-image: var(--stripesDark), var(--rainbow);
29+
filter: blur(10px) opacity(50%) saturate(200%);
30+
}
31+
.dark .jumbo::after {
32+
background-image: var(--stripesDark), var(--rainbow);
33+
}
34+
35+
ul>li .active {
36+
@apply text-primary-600 dark:text-primary
37+
}
38+
}
39+
40+
/*Start Animations*/
41+
@-webkit-keyframes animatetop {
42+
from {
43+
top: -300px;
44+
opacity: 0;
45+
}
46+
to {
47+
top: 0;
48+
opacity: 1;
49+
}
50+
}
51+
@keyframes animatetop {
52+
from {
53+
top: -300px;
54+
opacity: 0;
55+
}
56+
to {
57+
top: 0;
58+
opacity: 1;
59+
}
60+
}
61+
@-webkit-keyframes zoomIn {
62+
0% {
63+
opacity: 0;
64+
-webkit-transform: scale3d(0.3, 0.3, 0.3);
65+
transform: scale3d(0.3, 0.3, 0.3);
66+
}
67+
50% {
68+
opacity: 1;
69+
}
70+
}
71+
@keyframes zoomIn {
72+
0% {
73+
opacity: 0;
74+
-webkit-transform: scale3d(0.3, 0.3, 0.3);
75+
transform: scale3d(0.3, 0.3, 0.3);
76+
}
77+
50% {
78+
opacity: 1;
79+
}
80+
}
81+
82+
.area {
83+
@apply bg-white dark:bg-slate-950;
84+
width: 100%;
85+
height: 100vh;
86+
position: absolute;
87+
top: 0rem;
88+
z-index: -1;
89+
}
90+
91+
.circles {
92+
position: absolute;
93+
top: 0;
94+
left: 0;
95+
width: 100%;
96+
height: 100%;
97+
overflow: hidden;
98+
}
99+
100+
.circles li {
101+
position: absolute;
102+
display: block;
103+
list-style: none;
104+
width: 20px;
105+
height: 20px;
106+
background: rgb(0, 169, 132, 0.2);
107+
animation: animate 25s linear infinite;
108+
bottom: -150px;
109+
}
110+
111+
.circles li:nth-child(1) {
112+
left: 25%;
113+
width: 80px;
114+
height: 80px;
115+
animation-delay: 0s;
116+
}
117+
118+
.circles li:nth-child(2) {
119+
left: 10%;
120+
width: 20px;
121+
height: 20px;
122+
animation-delay: 2s;
123+
animation-duration: 12s;
124+
}
125+
126+
.circles li:nth-child(3) {
127+
left: 70%;
128+
width: 20px;
129+
height: 20px;
130+
animation-delay: 4s;
131+
}
132+
133+
.circles li:nth-child(4) {
134+
left: 40%;
135+
width: 60px;
136+
height: 60px;
137+
animation-delay: 0s;
138+
animation-duration: 18s;
139+
}
140+
141+
.circles li:nth-child(5) {
142+
left: 65%;
143+
width: 20px;
144+
height: 20px;
145+
animation-delay: 0s;
146+
}
147+
148+
.circles li:nth-child(6) {
149+
left: 75%;
150+
width: 110px;
151+
height: 110px;
152+
animation-delay: 3s;
153+
}
154+
155+
.circles li:nth-child(7) {
156+
left: 35%;
157+
width: 150px;
158+
height: 150px;
159+
animation-delay: 7s;
160+
}
161+
162+
.circles li:nth-child(8) {
163+
left: 50%;
164+
width: 25px;
165+
height: 25px;
166+
animation-delay: 15s;
167+
animation-duration: 45s;
168+
}
169+
170+
.circles li:nth-child(9) {
171+
left: 20%;
172+
width: 15px;
173+
height: 15px;
174+
animation-delay: 2s;
175+
animation-duration: 35s;
176+
}
177+
178+
.circles li:nth-child(10) {
179+
left: 85%;
180+
width: 150px;
181+
height: 150px;
182+
animation-delay: 0s;
183+
animation-duration: 11s;
184+
}
185+
186+
@keyframes animate {
187+
0% {
188+
transform: translateY(0) rotate(0deg);
189+
opacity: 1;
190+
border-radius: 0;
191+
}
192+
193+
100% {
194+
transform: translateY(-1000px) rotate(720deg);
195+
opacity: 0;
196+
border-radius: 50%;
197+
}
198+
}
199+
200+
.box {
201+
display: grid;
202+
place-content: center;
203+
color: white;
204+
text-shadow: 0 1px 0 #00000000;
205+
--border-angle: 0turn;
206+
--main-bg: conic-gradient(
207+
from var(--border-angle),
208+
rgba(34, 17, 51, 0),
209+
rgba(17, 17, 34, 0) 5%,
210+
rgba(17, 17, 34, 0) 60%,
211+
rgba(34, 17, 51, 0) 95%
212+
);
213+
border: solid 5px transparent;
214+
--gradient-border: conic-gradient(
215+
from var(--border-angle),
216+
transparent 25%,
217+
rgb(0, 255, 128),
218+
rgb(0, 122, 122) 99%,
219+
transparent
220+
);
221+
background: var(--main-bg) padding-box, var(--gradient-border) border-box, var(--main-bg) border-box;
222+
background-position: center center;
223+
-webkit-animation: bg-spin 7s linear infinite;
224+
animation: bg-spin 7s linear infinite;
225+
}
226+
@-webkit-keyframes bg-spin {
227+
to {
228+
--border-angle: 1turn;
229+
}
230+
}
231+
@keyframes bg-spin {
232+
to {
233+
--border-angle: 1turn;
234+
}
235+
}
236+
.box:hover {
237+
-webkit-animation-play-state: paused;
238+
animation-play-state: paused;
239+
}
240+
241+
@property --border-angle {
242+
syntax: "<angle>";
243+
inherits: true;
244+
initial-value: 0turn;
245+
}

0 commit comments

Comments
 (0)