Skip to content

Commit f356714

Browse files
UserAkkuLaurelineP
UserAkku
and
LaurelineP
authored
added a pentagon animation (#3210)
* added a pentagon animation * Fixed stylesheet link path * Fix stylesheet link in index.html * Rename style.css to styles.css --------- Co-authored-by: Laureline Paris <laurelinedev@gmail.com>
1 parent 247663e commit f356714

3 files changed

Lines changed: 114 additions & 0 deletions

File tree

‎Art/UserAkku-pentagon/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>Pentagon Animation</title>
7+
<link rel="stylesheet" href="styles.css">
8+
</head>
9+
<body>
10+
<div class="container">
11+
<div class="pentagon"></div>
12+
<div class="pentagon"></div>
13+
<div class="pentagon"></div>
14+
<div class="pentagon"></div>
15+
<div class="pentagon"></div>
16+
</div>
17+
</body>
18+
</html>

‎Art/UserAkku-pentagon/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": "pentagon"
4+
}

‎Art/UserAkku-pentagon/styles.css‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
body {
2+
margin: 0;
3+
height: 100vh;
4+
display: flex;
5+
justify-content: center;
6+
align-items: center;
7+
background: #1a1a2e;
8+
overflow: hidden;
9+
}
10+
11+
.container {
12+
position: relative;
13+
width: 400px;
14+
height: 400px;
15+
}
16+
17+
.pentagon {
18+
position: absolute;
19+
width: 100px;
20+
height: 100px;
21+
clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
22+
animation: rotate 4s linear infinite;
23+
}
24+
25+
.pentagon:nth-child(1) {
26+
background: #ff6b6b;
27+
top: 50%;
28+
left: 50%;
29+
transform: translate(-50%, -50%);
30+
animation: spin 3s linear infinite, pulse 2s ease-in-out infinite;
31+
}
32+
33+
.pentagon:nth-child(2) {
34+
background: #4ecdc4;
35+
top: 20%;
36+
left: 50%;
37+
transform: translate(-50%, -50%);
38+
animation: orbit 5s linear infinite;
39+
}
40+
41+
.pentagon:nth-child(3) {
42+
background: #ffe66d;
43+
top: 80%;
44+
left: 50%;
45+
transform: translate(-50%, -50%);
46+
animation: orbit 5s linear infinite reverse;
47+
}
48+
49+
.pentagon:nth-child(4) {
50+
background: #95e1d3;
51+
top: 50%;
52+
left: 20%;
53+
transform: translate(-50%, -50%);
54+
animation: orbit 6s linear infinite;
55+
animation-delay: 1s;
56+
}
57+
58+
.pentagon:nth-child(5) {
59+
background: #f38181;
60+
top: 50%;
61+
left: 80%;
62+
transform: translate(-50%, -50%);
63+
animation: orbit 6s linear infinite reverse;
64+
animation-delay: 1s;
65+
}
66+
67+
@keyframes spin {
68+
0% {
69+
transform: translate(-50%, -50%) rotate(0deg);
70+
}
71+
100% {
72+
transform: translate(-50%, -50%) rotate(360deg);
73+
}
74+
}
75+
76+
@keyframes pulse {
77+
0%, 100% {
78+
transform: translate(-50%, -50%) scale(1);
79+
}
80+
50% {
81+
transform: translate(-50%, -50%) scale(1.3);
82+
}
83+
}
84+
85+
@keyframes orbit {
86+
0% {
87+
transform: translate(-50%, -50%) rotate(0deg) translateX(120px) rotate(0deg);
88+
}
89+
100% {
90+
transform: translate(-50%, -50%) rotate(360deg) translateX(120px) rotate(-360deg);
91+
}
92+
}

0 commit comments

Comments
 (0)