Skip to content

Commit 34b1b45

Browse files
UserAkkuLaurelineP
UserAkku
and
LaurelineP
authored
Music on emoji withs beats animation (#3212)
* added a pentagon animation * Music On beats animation added * Delete Art/UserAkku-pentagon/index.html * Delete Art/UserAkku-pentagon/style.css * Delete Art/UserAkku-pentagon/meta.json * Fix stylesheet link path in index.html * Fix stylesheet link in index.html * Rename style.css to styles.css * Update wave animation and opacity in styles.css * Enhance styles with animations for beats and waves Added animations for beats and waves, enhancing visual effects. --------- Co-authored-by: Laureline Paris <[email protected]>
1 parent 03e7bc2 commit 34b1b45

File tree

3 files changed

+156
-0
lines changed

3 files changed

+156
-0
lines changed

‎Art/UserAkku-Music-On/index.html‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
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>Beats Hover Effect</title>
7+
<link rel="stylesheet" href="styles.css">
8+
</head>
9+
<body>
10+
<div class="beats-container">
11+
<div class="beats">🎧</div>
12+
<div class="wave wave1"></div>
13+
<div class="wave wave2"></div>
14+
<div class="wave wave3"></div>
15+
<div class="wave wave4"></div>
16+
<div class="wave wave5"></div>
17+
<div class="wave wave6"></div>
18+
<div class="text">MUSIC ON!</div>
19+
</div>
20+
</body>
21+
</html>

‎Art/UserAkku-Music-On/meta.json‎

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

‎Art/UserAkku-Music-On/styles.css‎

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
body {
2+
margin: 0;
3+
height: 100vh;
4+
display: flex;
5+
justify-content: center;
6+
align-items: center;
7+
background: #1a1a1a;
8+
font-family: Arial, sans-serif;
9+
overflow: hidden;
10+
}
11+
12+
.beats-container {
13+
position: relative;
14+
animation: float 3s ease-in-out infinite;
15+
}
16+
17+
.beats {
18+
font-size: 100px;
19+
animation: rotate 4s ease-in-out infinite;
20+
filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.5));
21+
}
22+
23+
@keyframes float {
24+
0%, 100% {
25+
transform: translateY(0px);
26+
}
27+
50% {
28+
transform: translateY(-20px);
29+
}
30+
}
31+
32+
@keyframes rotate {
33+
0%, 100% {
34+
transform: rotate(-5deg) scale(1);
35+
}
36+
50% {
37+
transform: rotate(5deg) scale(1.1);
38+
}
39+
}
40+
41+
/* Waves */
42+
.wave {
43+
position: absolute;
44+
width: 10px;
45+
background: linear-gradient(to top, #4CAF50, #8BC34A);
46+
border-radius: 10px;
47+
animation: pulse 0.6s ease-in-out infinite;
48+
}
49+
50+
.wave1 {
51+
left: -40px;
52+
top: 50%;
53+
transform: translateY(-50%);
54+
height: 40px;
55+
animation-delay: 0s;
56+
}
57+
58+
.wave2 {
59+
left: -70px;
60+
top: 50%;
61+
transform: translateY(-50%);
62+
height: 50px;
63+
animation-delay: 0.1s;
64+
}
65+
66+
.wave3 {
67+
left: -100px;
68+
top: 50%;
69+
transform: translateY(-50%);
70+
height: 35px;
71+
animation-delay: 0.2s;
72+
}
73+
74+
.wave4 {
75+
right: -40px;
76+
top: 50%;
77+
transform: translateY(-50%);
78+
height: 40px;
79+
animation-delay: 0s;
80+
}
81+
82+
.wave5 {
83+
right: -70px;
84+
top: 50%;
85+
transform: translateY(-50%);
86+
height: 50px;
87+
animation-delay: 0.1s;
88+
}
89+
90+
.wave6 {
91+
right: -100px;
92+
top: 50%;
93+
transform: translateY(-50%);
94+
height: 35px;
95+
animation-delay: 0.2s;
96+
}
97+
98+
@keyframes pulse {
99+
0%, 100% {
100+
transform: translateY(-50%) scaleY(1);
101+
opacity: 0.8;
102+
}
103+
50% {
104+
transform: translateY(-50%) scaleY(1.8);
105+
opacity: 1;
106+
}
107+
}
108+
109+
.text {
110+
position: absolute;
111+
bottom: -60px;
112+
left: 50%;
113+
transform: translateX(-50%);
114+
color: white;
115+
font-size: 24px;
116+
font-weight: bold;
117+
white-space: nowrap;
118+
animation: glow 2s ease-in-out infinite;
119+
text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
120+
}
121+
122+
@keyframes glow {
123+
0%, 100% {
124+
opacity: 0.6;
125+
text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
126+
}
127+
50% {
128+
opacity: 1;
129+
text-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
130+
}
131+
}

0 commit comments

Comments
 (0)