Skip to content

Commit 4fe6c9b

Browse files
Lakshya182005Lakshya182005
authored
add Bouncing Swords (#3244)
1 parent a1c6646 commit 4fe6c9b

3 files changed

Lines changed: 128 additions & 0 deletions

File tree

‎Art/Lakshya182005_bouncing_swords/index.html‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Bouncing Swords</title>
7+
<link rel="stylesheet" href="styles.css">
8+
</head>
9+
<body>
10+
<div class="container">
11+
<div class="sword sword1">
12+
<div class="blade"></div>
13+
<div class="guard"></div>
14+
<div class="handle"></div>
15+
<div class="pommel"></div>
16+
</div>
17+
<div class="sword sword2">
18+
<div class="blade"></div>
19+
<div class="guard"></div>
20+
<div class="handle"></div>
21+
<div class="pommel"></div>
22+
</div>
23+
<div class="sword sword3">
24+
<div class="blade"></div>
25+
<div class="guard"></div>
26+
<div class="handle"></div>
27+
<div class="pommel"></div>
28+
</div>
29+
</div>
30+
</body>
31+
</html>

‎Art/Lakshya182005_bouncing_swords/meta.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"artName": "Bouncing Swords",
3+
"githubHandle": "Lakshya182005"
4+
}

‎Art/Lakshya182005_bouncing_swords/styles.css‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
9+
height: 100vh;
10+
display: flex;
11+
justify-content: center;
12+
align-items: center;
13+
overflow: hidden;
14+
}
15+
16+
.container {
17+
position: relative;
18+
width: 600px;
19+
height: 400px;
20+
}
21+
22+
.sword {
23+
position: absolute;
24+
width: 40px;
25+
height: 200px;
26+
animation: bounce 2s ease-in-out infinite;
27+
}
28+
29+
.sword1 {
30+
left: 100px;
31+
animation-delay: 0s;
32+
}
33+
34+
.sword2 {
35+
left: 280px;
36+
animation-delay: 0.3s;
37+
}
38+
39+
.sword3 {
40+
left: 460px;
41+
animation-delay: 0.6s;
42+
}
43+
44+
.blade {
45+
width: 8px;
46+
height: 140px;
47+
background: linear-gradient(to bottom, #e0e0e0 0%, #a8a8a8 100%);
48+
margin: 0 auto;
49+
border-radius: 4px 4px 0 0;
50+
box-shadow: inset 2px 0 4px rgba(255, 255, 255, 0.5),
51+
inset -2px 0 4px rgba(0, 0, 0, 0.3);
52+
}
53+
54+
.guard {
55+
width: 40px;
56+
height: 8px;
57+
background: linear-gradient(to right, #d4af37 0%, #f4e99b 50%, #d4af37 100%);
58+
margin: 0 auto;
59+
border-radius: 2px;
60+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
61+
}
62+
63+
.handle {
64+
width: 12px;
65+
height: 40px;
66+
background: linear-gradient(to bottom, #8b4513 0%, #5c2e0a 100%);
67+
margin: 2px auto;
68+
border-radius: 2px;
69+
}
70+
71+
.pommel {
72+
width: 16px;
73+
height: 16px;
74+
background: radial-gradient(circle, #d4af37 0%, #a67c00 100%);
75+
margin: 0 auto;
76+
border-radius: 50%;
77+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
78+
}
79+
80+
@keyframes bounce {
81+
0%, 100% {
82+
transform: translateY(0) rotate(0deg);
83+
}
84+
25% {
85+
transform: translateY(-80px) rotate(-15deg);
86+
}
87+
50% {
88+
transform: translateY(-150px) rotate(0deg);
89+
}
90+
75% {
91+
transform: translateY(-80px) rotate(15deg);
92+
}
93+
}

0 commit comments

Comments
 (0)