Skip to content

Commit ffc602b

Browse files
Tzipi-WinefeldLaurelineP
Tzipi-Winefeld
and
LaurelineP
authored
my animations (#2895)
* my animations * remove icons --------- Co-authored-by: Laureline Paris <[email protected]>
1 parent a0fc057 commit ffc602b

File tree

9 files changed

+197
-0
lines changed

9 files changed

+197
-0
lines changed

‎Art/Tzipi-Winefeld-ColorRain/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 lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Color Rain Animation</title>
7+
<link rel="stylesheet" href="styles.css">
8+
</head>
9+
<body>
10+
<div class="rain"></div>
11+
</body>
12+
</html>

‎Art/Tzipi-Winefeld-ColorRain/meta.json‎

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

‎Art/Tzipi-Winefeld-ColorRain/styles.css‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
background-color: #121212;
9+
overflow: hidden;
10+
height: 100vh;
11+
display: flex;
12+
justify-content: center;
13+
align-items: center;
14+
}
15+
16+
.rain {
17+
position: relative;
18+
width: 100px;
19+
height: 100%;
20+
}
21+
22+
.rain::before {
23+
content: '';
24+
position: absolute;
25+
top: 0;
26+
left: 0;
27+
width: 100%;
28+
height: 100%;
29+
background: repeating-linear-gradient(0deg, rgba(255, 0, 0, 0.8), rgba(255, 0, 0, 0.8) 10px, rgba(0, 255, 0, 0.8) 10px, rgba(0, 255, 0, 0.8) 20px, rgba(0, 0, 255, 0.8) 20px, rgba(0, 0, 255, 0.8) 30px);
30+
animation: rainDrop 1s infinite linear;
31+
}
32+
33+
@keyframes rainDrop {
34+
0% {
35+
transform: translateY(-100%);
36+
}
37+
100% {
38+
transform: translateY(100%);
39+
}
40+
}
41+

‎Art/Tzipi-Winefeld-GlowingText/index.html‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
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>Glowing Text Animation</title>
7+
<link rel="stylesheet" href="styles.css">
8+
</head>
9+
<body>
10+
<div class="glowing-text">
11+
<span class="glow">H</span>
12+
<span class="glow">E</span>
13+
<span class="glow">L</span>
14+
<span class="glow">L</span>
15+
<span class="glow">O</span>
16+
</div>
17+
</body>
18+
</html>

‎Art/Tzipi-Winefeld-GlowingText/meta.json‎

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

‎Art/Tzipi-Winefeld-GlowingText/styles.css‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
background-color: #121212;
9+
display: flex;
10+
justify-content: center;
11+
align-items: center;
12+
height: 100vh;
13+
}
14+
15+
.glowing-text {
16+
font-family: Arial, sans-serif;
17+
font-size: 5rem;
18+
font-weight: bold;
19+
color: white;
20+
display: flex;
21+
}
22+
23+
.glow {
24+
position: relative;
25+
animation: glowing 1.5s infinite alternate;
26+
}
27+
28+
.glow::before {
29+
content: '';
30+
position: absolute;
31+
top: 0;
32+
left: 0;
33+
width: 100%;
34+
height: 100%;
35+
background: linear-gradient(45deg, #ff00ff, #00ffff);
36+
background-size: 200% 200%;
37+
animation: glowingEffect 1.5s infinite alternate;
38+
z-index: -1;
39+
}
40+
41+
@keyframes glowing {
42+
0% {
43+
text-shadow: 0 0 5px rgba(255, 255, 255, 0.5), 0 0 10px rgba(255, 255, 255, 0.5);
44+
opacity: 0.7;
45+
}
46+
100% {
47+
text-shadow: 0 0 10px rgba(255, 255, 255, 1), 0 0 20px rgba(255, 255, 255, 1);
48+
opacity: 1;
49+
}
50+
}
51+
52+
@keyframes glowingEffect {
53+
0% {
54+
background-position: 0% 0%;
55+
}
56+
100% {
57+
background-position: 100% 100%;
58+
}
59+
}
60+

‎Art/Tzipi-Winefeld-RisingSun/index.html‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
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>Rising Sun</title>
7+
<link rel="stylesheet" href="styles.css">
8+
</head>
9+
<body>
10+
<div class="sky">
11+
<div class="sun"></div>
12+
</div>
13+
</body>
14+
</html>

‎Art/Tzipi-Winefeld-RisingSun/meta.json‎

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

‎Art/Tzipi-Winefeld-RisingSun/styles.css‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
body {
2+
margin: 0;
3+
overflow: hidden;
4+
height: 100vh;
5+
background: linear-gradient(to top, #001f3f, #87ceeb);
6+
}
7+
8+
.sky {
9+
width: 100%;
10+
height: 100%;
11+
position: relative;
12+
}
13+
14+
.sun {
15+
position: absolute;
16+
bottom: -50px;
17+
left: 50%;
18+
width: 100px;
19+
height: 100px;
20+
background: yellow;
21+
border-radius: 50%;
22+
transform: translateX(-50%);
23+
animation: rise 5s infinite;
24+
}
25+
26+
@keyframes rise {
27+
0% {
28+
bottom: -50px;
29+
background: yellow;
30+
}
31+
50% {
32+
bottom: 50%;
33+
background: orange;
34+
}
35+
100% {
36+
bottom: -50px;
37+
background: yellow;
38+
}
39+
}
40+

0 commit comments

Comments
 (0)