diff --git a/Art/Vsingla21-graphique/index.html b/Art/Vsingla21-graphique/index.html new file mode 100644 index 000000000..a5eb48747 --- /dev/null +++ b/Art/Vsingla21-graphique/index.html @@ -0,0 +1,20 @@ + + + + + + 3D Rotating Star Animation with Unique Random Colors + + + + +
+
+
+
+
+
+
+ + + diff --git a/Art/Vsingla21-graphique/meta.json b/Art/Vsingla21-graphique/meta.json new file mode 100644 index 000000000..870ad4eec --- /dev/null +++ b/Art/Vsingla21-graphique/meta.json @@ -0,0 +1,4 @@ +{ + "artName": "graphique", + "githubHandle": "Vsingla21" +} \ No newline at end of file diff --git a/Art/Vsingla21-graphique/styles.css b/Art/Vsingla21-graphique/styles.css new file mode 100644 index 000000000..6e08da918 --- /dev/null +++ b/Art/Vsingla21-graphique/styles.css @@ -0,0 +1,167 @@ + + * { + box-sizing: border-box; + margin: 0; + padding: 0; + } + + body { + display: flex; + align-items: center; + justify-content: center; + height: 100vh; + background-color: #000; + overflow: hidden; + perspective: 1000px; + } + + .star-container { + width: 150px; + height: 150px; + position: relative; + transform-style: preserve-3d; + animation: rotate 5s linear infinite; + } + + .star { + position: absolute; + width: 100%; + height: 100%; + clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); + animation: changeColor 5s linear infinite; + } + + .star:nth-child(1) { + transform: rotateY(0deg) translateZ(75px); + animation: changeColor1 5s linear infinite; + } + .star:nth-child(2) { + transform: rotateY(72deg) translateZ(75px); + animation: changeColor2 5s linear infinite; + } + .star:nth-child(3) { + transform: rotateY(144deg) translateZ(75px); + animation: changeColor3 5s linear infinite; + } + .star:nth-child(4) { + transform: rotateY(216deg) translateZ(75px); + animation: changeColor4 5s linear infinite; + } + .star:nth-child(5) { + transform: rotateY(288deg) translateZ(75px); + animation: changeColor5 5s linear infinite; + } + + @keyframes rotate { + 0% { + transform: rotateY(0deg); + } + 100% { + transform: rotateY(360deg); + } + } + + @keyframes changeColor1 { + 0% { + background: hsl(0, 100%, 50%); /* Red */ + } + 20% { + background: hsl(60, 100%, 50%); /* Yellow */ + } + 40% { + background: hsl(120, 100%, 50%); /* Green */ + } + 60% { + background: hsl(180, 100%, 50%); /* Cyan */ + } + 80% { + background: hsl(240, 100%, 50%); /* Blue */ + } + 100% { + background: hsl(360, 100%, 50%); /* Red again */ + } + } + + @keyframes changeColor2 { + 0% { + background: hsl(30, 100%, 50%); /* Orange */ + } + 20% { + background: hsl(90, 100%, 50%); /* Light Green */ + } + 40% { + background: hsl(150, 100%, 50%); /* Lime Green */ + } + 60% { + background: hsl(210, 100%, 50%); /* Sky Blue */ + } + 80% { + background: hsl(270, 100%, 50%); /* Purple */ + } + 100% { + background: hsl(330, 100%, 50%); /* Pink */ + } + } + + @keyframes changeColor3 { + 0% { + background: hsl(10, 100%, 50%); /* Red-Orange */ + } + 20% { + background: hsl(70, 100%, 50%); /* Yellow-Green */ + } + 40% { + background: hsl(130, 100%, 50%); /* Green-Yellow */ + } + 60% { + background: hsl(190, 100%, 50%); /* Light Blue */ + } + 80% { + background: hsl(250, 100%, 50%); /* Dark Blue */ + } + 100% { + background: hsl(310, 100%, 50%); /* Violet */ + } + } + + @keyframes changeColor4 { + 0% { + background: hsl(20, 100%, 50%); /* Light Red */ + } + 20% { + background: hsl(80, 100%, 50%); /* Light Yellow */ + } + 40% { + background: hsl(140, 100%, 50%); /* Yellow-Green */ + } + 60% { + background: hsl(200, 100%, 50%); /* Light Cyan */ + } + 80% { + background: hsl(260, 100%, 50%); /* Purple-Blue */ + } + 100% { + background: hsl(320, 100%, 50%); /* Magenta */ + } + } + + @keyframes changeColor5 { + 0% { + background: hsl(50, 100%, 50%); /* Lime */ + } + 20% { + background: hsl(110, 100%, 50%); /* Light Blue-Green */ + } + 40% { + background: hsl(170, 100%, 50%); /* Green-Blue */ + } + 60% { + background: hsl(230, 100%, 50%); /* Light Sky Blue */ + } + 80% { + background: hsl(290, 100%, 50%); /* Lavender */ + } + 100% { + background: hsl(350, 100%, 50%); /* Red-Pink */ + } + } \ No newline at end of file