diff --git a/Art/Voidedcrystal-disco/index.html b/Art/Voidedcrystal-disco/index.html new file mode 100644 index 000000000..4ee74b326 --- /dev/null +++ b/Art/Voidedcrystal-disco/index.html @@ -0,0 +1,13 @@ + + + + + Untitled Document + + + + +
+ + + diff --git a/Art/Voidedcrystal-disco/meta.json b/Art/Voidedcrystal-disco/meta.json new file mode 100644 index 000000000..dadb737d8 --- /dev/null +++ b/Art/Voidedcrystal-disco/meta.json @@ -0,0 +1,4 @@ +{ + "artName": "Disco Ball", + "githubHandle": "VoidedCrystal" +} \ No newline at end of file diff --git a/Art/Voidedcrystal-disco/styles.css b/Art/Voidedcrystal-disco/styles.css new file mode 100644 index 000000000..07da9f8a0 --- /dev/null +++ b/Art/Voidedcrystal-disco/styles.css @@ -0,0 +1,73 @@ +/* CSS Document */ +body { + background: black; + +} + +div { + background: gray; + position: absolute; + left: 48%; + top: 40%; + width: 200px; + height: 200px; + border-radius: 100%; + box-shadow: + inset 0 0 50px #fff, + inset 20px 0 80px #f0f, + inset -20px 0 80px #0ff, + inset 20px 0 300px #f0f, + inset -20px 0 300px #0ff, + 0 0 50px #fff, + -10px 0 80px #f0f, + 10px 0 80px #0ff; + animation-name: disco; + animation-duration: 4s; + animation-iteration-count: infinite; + +} + + +@keyframes disco{ + 0% {box-shadow: inset 0 0 50px #fff, + inset 20px 0 80px #f0f, + inset -20px 0 80px #0ff, + inset 20px 0 300px #f0f, + inset -20px 0 300px #0ff, + 0 0 50px #fff, + -10px 0 80px #f0f, + 10px 0 80px #0ff;} + 25% {box-shadow: inset 0 0 50px #fff, + inset 20px 0 80px #9900ff, + inset -20px 0 80px #9966ff, + inset 20px 0 300px #9900ff, + inset -20px 0 300px #9966ff, + 0 0 50px #fff, + -10px 0 80px #9900ff, + 10px 0 80px #9966ff;} + 50% {box-shadow: + inset 0 0 50px #fff, + inset 20px 0 80px #0ff, + inset -20px 0 80px #f0f, + inset 20px 0 300px #0ff, + inset -20px 0 300px #f0f, + 0 0 50px #fff, + -10px 0 80px #0ff, + 10px 0 80px #f0f;} + 75% {box-shadow: inset 0 0 50px #fff, + inset 20px 0 80px #9966ff, + inset -20px 0 80px #9900ff, + inset 20px 0 300px #9966ff, + inset -20px 0 300px #9900ff, + 0 0 50px #fff, + -10px 0 80px #9966ff, + 10px 0 80px #9900ff;} + 100% {box-shadow: inset 0 0 50px #fff, + inset 20px 0 80px #f0f, + inset -20px 0 80px #0ff, + inset 20px 0 300px #f0f, + inset -20px 0 300px #0ff, + 0 0 50px #fff, + -10px 0 80px #f0f, + 10px 0 80px #0ff;} + }