Skip to content

Commit 27d78e3

Browse files
Ayansaxena24Ayansaxena24
committed
Added box animation
1 parent aa8596e commit 27d78e3

File tree

3 files changed

+135
-0
lines changed

3 files changed

+135
-0
lines changed

‎Square Animation/ezgif.com-video-to-gif.gif

3.3 MB
Loading

‎Square Animation/index.html

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>HacktoberFest Animation</title>
5+
<link rel="stylesheet" type="text/css" href="style.css">
6+
</head>
7+
<body>
8+
<div class="box">
9+
<h2>HacktoberFest 2023</h2>
10+
</div>
11+
</body>
12+
</html>

‎Square Animation/style.css

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
@import url("https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900");
2+
*
3+
{
4+
font-family: 'Poppins', sans-serif;
5+
margin: 0;
6+
padding: 0;
7+
box-sizing: border-box;
8+
}
9+
10+
body {
11+
display: flex;
12+
justify-content: center;
13+
align-items: center;
14+
min-height: 100vh;
15+
/* background: #0e1538; */
16+
background: black;
17+
}
18+
19+
.box {
20+
position: relative;
21+
width: 300px;
22+
height: 300px;
23+
display: flex;
24+
justify-content: center;
25+
align-items: center;
26+
background: black;
27+
overflow: hidden;
28+
border-radius: 16px;
29+
padding-left: 0px;
30+
}
31+
32+
.box::before {
33+
content: '';
34+
position: absolute;
35+
width: 150px;
36+
height: 140%;
37+
background: linear-gradient(#00ccff, #d400d4);
38+
animation: animate 4s linear infinite;
39+
}
40+
41+
.box::after
42+
{
43+
content: '';
44+
position: absolute;
45+
inset : 4px;
46+
background: black;
47+
border-radius: 16px;
48+
}
49+
50+
@keyframes animate {
51+
0%
52+
{
53+
transform: rotate(0deg);
54+
55+
}
56+
100%
57+
{
58+
transform: rotate(360deg);
59+
}
60+
}
61+
62+
.box h2 {
63+
color: #ffff;
64+
font-size: 2em;
65+
justify-content: center;
66+
text-align: center;
67+
padding-left: 0px;
68+
z-index: 10;
69+
animation: example 6s linear infinite;
70+
}
71+
72+
.box h2::before {
73+
color: #00ccff;
74+
font-size: 2em;
75+
justify-content: center;
76+
text-align: center;
77+
padding-left: 0px;
78+
z-index: 10;
79+
animation: example 3s linear infinite;
80+
}
81+
82+
.box h2::after {
83+
color: #d400d4;
84+
font-size: 2em;
85+
/* justify-content: center; */
86+
/* text-align: center; */
87+
/* padding-left: 0px; */
88+
z-index: 10;
89+
}
90+
91+
@keyframes example {
92+
0%
93+
{
94+
transform:translateX(0px);
95+
transform:translateY(0px);
96+
color: #ffff;
97+
}
98+
25%
99+
{
100+
transform:translateX(50px);
101+
transform:translateY(50px);
102+
color: #fcc8fc;
103+
}
104+
50%
105+
{
106+
transform:translateX(0px);
107+
transform:translateY(0px);
108+
color: #fd83fd;
109+
}
110+
75%
111+
{
112+
transform:translateX(-50px);
113+
transform:translateY(-50px);
114+
color: #5edaf9;
115+
}
116+
100%
117+
{
118+
transform:translateX(0px);
119+
transform:translateY(0px);
120+
color: #ffff;
121+
}
122+
}
123+

0 commit comments

Comments
 (0)