Skip to content

Commit 56b006c

Browse files
Pepepg03Pepepg03
authored
Added new animation folder (#2907)
1 parent aa5125a commit 56b006c

File tree

3 files changed

+92
-0
lines changed

3 files changed

+92
-0
lines changed

‎Art/Pepepg03-MorphLoop/index.html

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
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>Animation</title>
7+
<link rel="stylesheet" href="styles.css">
8+
</head>
9+
<body>
10+
<div class="container">
11+
<div class="square square1"></div>
12+
<div class="square square2"></div>
13+
<div class="square square3"></div>
14+
<div class="square square-fill"></div>
15+
</div>
16+
</body>
17+
</html>

‎Art/Pepepg03-MorphLoop/meta.json

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

‎Art/Pepepg03-MorphLoop/styles.css

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
body {
2+
background-color: black;
3+
margin: 0;
4+
display: flex;
5+
justify-content: center;
6+
align-items: center;
7+
height: 100vh;
8+
overflow: hidden;
9+
}
10+
11+
.container {
12+
position: relative;
13+
width: 100px;
14+
height: 100px;
15+
}
16+
17+
.square{
18+
height: 50px;
19+
width: 50px;
20+
border: 6px solid rgb(218, 41, 109);
21+
background-color: black;
22+
border-radius: 4px;
23+
box-shadow: 0 0 10px rgb(218, 41, 109), 0 0 10px rgb(218, 41, 109) inset;
24+
position: absolute;
25+
top: 50%;
26+
left: 50%;
27+
transform: translate(-100%, -100%);
28+
z-index: 10;
29+
animation: MorphLoop 4s ease-in-out 0s infinite normal;
30+
}
31+
32+
.square-fill{
33+
background-color: rgb(237, 253, 255);
34+
border: 6px solid rgb(237, 253, 255);
35+
box-shadow: 0 0 10px rgb(237, 253, 255), 0 0 10px rgb(237, 253, 255) inset;
36+
}
37+
38+
.square1{
39+
animation-delay: 1s;
40+
border: 6px solid rgb(38, 206, 170);
41+
box-shadow: 0 0 10px rgb(38, 206, 170), 0 0 10px rgb(38, 206, 170) inset;
42+
}
43+
.square2{
44+
animation-delay: 2s;
45+
border: 6px solid rgb(123, 173, 226);
46+
box-shadow: 0 0 10px rgb(123, 173, 226), 0 0 10px rgb(123, 173, 226) inset;
47+
}
48+
.square3{
49+
animation-delay: 3s;
50+
border: 6px solid rgb(80, 73, 204);
51+
box-shadow: 0 0 10px rgb(80, 73, 204), 0 0 10px rgb(80, 73, 204) inset;
52+
}
53+
54+
@keyframes MorphLoop {
55+
0% {
56+
transform: translate(-100%, -100%) translate(0px, 0px) rotateZ(0);
57+
border-radius: 4px;
58+
}
59+
25% {
60+
transform: translate(-100%, -100%) translate(100px, 0px) rotateZ(180deg);
61+
border-radius: 50%;
62+
}
63+
50% {
64+
transform: translate(-100%, -100%) translate(100px, 100px) rotateZ(360deg);
65+
border-radius: 4px;
66+
}
67+
75% {
68+
transform: translate(-100%, -100%) translate(0px, 100px) rotateZ(180deg);
69+
border-radius: 50%;
70+
}
71+
}

0 commit comments

Comments
 (0)