Skip to content

Commit 67d0ff5

Browse files
FeangapeGamedevFelipe GarciaLaurelineP
authored
Css art vaporwave (#2961)
* Created the folders and files * created the animation Loop --------- Co-authored-by: Felipe Garcia <[email protected]> Co-authored-by: Laureline Paris <[email protected]>
1 parent e54bb93 commit 67d0ff5

File tree

3 files changed

+110
-0
lines changed

3 files changed

+110
-0
lines changed

‎Art/FeangapeGamedev-vaporwave/index.html‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
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+
<link rel="stylesheet" href="styles.css">
7+
<title>Vaporwave</title>
8+
</head>
9+
<body class="background">
10+
<div class="container">
11+
<div class="squareOne"></div>
12+
<div class="squareTwo"></div>
13+
<div class="masked-image"></div>
14+
</div>
15+
</body>
16+
</html>

‎Art/FeangapeGamedev-vaporwave/meta.json‎

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

‎Art/FeangapeGamedev-vaporwave/styles.css‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
.background {
2+
display: flex;
3+
justify-content: center;
4+
align-items: center;
5+
min-height: 100vh;
6+
margin: 0;
7+
background: linear-gradient(45deg, #1a1a2e, #16213e);
8+
}
9+
10+
.container {
11+
position: relative;
12+
width: 500px;
13+
height: 1000px;
14+
}
15+
16+
.squareOne {
17+
position: absolute;
18+
height: 500px;
19+
width: 500px;
20+
background: repeating-linear-gradient(
21+
45deg,
22+
transparent 0px,
23+
transparent 8px,
24+
magenta 8px,
25+
magenta 16px
26+
);
27+
animation: moveDown 10s infinite alternate ease-in-out;
28+
top: 0;
29+
}
30+
31+
.squareTwo {
32+
position: absolute;
33+
height: 500px;
34+
width: 500px;
35+
background: repeating-linear-gradient(
36+
-45deg,
37+
transparent 0px,
38+
transparent 8px,
39+
cyan 8px,
40+
cyan 16px
41+
);
42+
animation: moveUp 10s infinite alternate ease-in-out;
43+
bottom: 0;
44+
}
45+
46+
.masked-image {
47+
position: absolute;
48+
top: 50%;
49+
left: 50%;
50+
transform: translate(-50%, -50%);
51+
width: 200px;
52+
height: 200px;
53+
background: radial-gradient(circle, #ffff00, #ff0080);
54+
border-radius: 50%;
55+
opacity: 0;
56+
animation: revealImage 10s infinite alternate ease-in-out;
57+
}
58+
59+
@keyframes moveDown {
60+
from {
61+
transform: translateY(0);
62+
}
63+
to {
64+
transform: translateY(500px);
65+
}
66+
}
67+
68+
@keyframes moveUp {
69+
from {
70+
transform: translateY(0);
71+
}
72+
to {
73+
transform: translateY(-500px);
74+
}
75+
}
76+
77+
@keyframes revealImage {
78+
0%, 20% {
79+
opacity: 0;
80+
transform: translate(-50%, -50%) scale(0.5);
81+
}
82+
50% {
83+
opacity: 1;
84+
transform: translate(-50%, -50%) scale(1);
85+
}
86+
80%, 100% {
87+
opacity: 0;
88+
transform: translate(-50%, -50%) scale(0.5);
89+
}
90+
}

0 commit comments

Comments
 (0)