diff --git a/Art/jeffwiatt-GoldenStars/index.html b/Art/jeffwiatt-GoldenStars/index.html new file mode 100644 index 000000000..1d320d8ef --- /dev/null +++ b/Art/jeffwiatt-GoldenStars/index.html @@ -0,0 +1,74 @@ + + + + + Star Animation + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+ + \ No newline at end of file diff --git a/Art/jeffwiatt-GoldenStars/meta.json b/Art/jeffwiatt-GoldenStars/meta.json new file mode 100644 index 000000000..ff6659c15 --- /dev/null +++ b/Art/jeffwiatt-GoldenStars/meta.json @@ -0,0 +1,4 @@ +{ + "artName": "GoldenStars", + "githubHandle": "jeffwiatt" +} \ No newline at end of file diff --git a/Art/jeffwiatt-GoldenStars/styles.css b/Art/jeffwiatt-GoldenStars/styles.css new file mode 100644 index 000000000..06110da10 --- /dev/null +++ b/Art/jeffwiatt-GoldenStars/styles.css @@ -0,0 +1,56 @@ +body { + background-color: #0f105e; +} + +#main { + position: absolute; + width: 500px; + height: 500px; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +.mainStar { + position: absolute; + top: 150px; + left: 150px; + width: 200px; + height: 200px; + aspect-ratio: 1; + background: #F8CA00; + clip-path: polygon(50% 0,79% 90%,2% 35%,98% 35%,21% 90%); + transform-origin: 50% 50%; + animation: spin-right 10s infinite linear; +} + +.starOuter { + position: absolute; + left: 225px; + top: 0; + width: 50px; + height: 50px; + transform-origin: 25px 250px; + animation: spin-left 10s infinite linear; +} + +.starInner { + position: absolute; + top: 0; + left: 0; + width: 50px; + height: 50px; + aspect-ratio: 1; + background: #F8CA00; + clip-path: polygon(50% 0,79% 90%,2% 35%,98% 35%,21% 90%); + transform-origin: 50% 50%; + animation: spin-right 10s infinite linear; +} + +@keyframes spin-right { + 100% { transform: rotateZ( -360deg); } +} + +@keyframes spin-left { + 100% { transform: rotateZ( 360deg); } +}