diff --git a/Art/oOXxTNTxXOo-colorchange/index.html b/Art/oOXxTNTxXOo-colorchange/index.html new file mode 100644 index 000000000..27cd9ec80 --- /dev/null +++ b/Art/oOXxTNTxXOo-colorchange/index.html @@ -0,0 +1,23 @@ + + + + colorchange + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+ + diff --git a/Art/oOXxTNTxXOo-colorchange/meta.json b/Art/oOXxTNTxXOo-colorchange/meta.json new file mode 100644 index 000000000..c2bfacbfa --- /dev/null +++ b/Art/oOXxTNTxXOo-colorchange/meta.json @@ -0,0 +1,5 @@ +{ + "githubHandle": "oOXxTNTxXOo", + "artName": "colorchange" + } + \ No newline at end of file diff --git a/Art/oOXxTNTxXOo-colorchange/styles.css b/Art/oOXxTNTxXOo-colorchange/styles.css new file mode 100644 index 000000000..ba1f0ceea --- /dev/null +++ b/Art/oOXxTNTxXOo-colorchange/styles.css @@ -0,0 +1,91 @@ +body { + animation: changercolor 15s linear infinite; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; + } + +@keyframes changercolor { /* background randbow cycle */ + 0%{ + background-color: red; + } + 25%{ + background-color: yellow; + } + 50%{ + background-color: cyan; + } + 75%{ + background-color: purple; + } + 100%{ + background-color: red; + } +} + +.pixel-container { + display: flex; + gap: 5px; +} + +.pixel { + width: 20px; + height: 20px; + opacity: 0; + animation: pixel-load 1s ease-in-out infinite; +} + +.pixel:nth-child(1) { + animation-delay: 0s; +} +.pixel:nth-child(2) { + animation-delay: 0.1s; +} +.pixel:nth-child(3) { + animation-delay: 0.2s; +} +.pixel:nth-child(4) { + animation-delay: 0.3s; +} +.pixel:nth-child(5) { + animation-delay: 0.4s; +} +.pixel:nth-child(6) { + animation-delay: 0.5s; +} +.pixel:nth-child(7) { + animation-delay: 0.6s; +} +.pixel:nth-child(8) { + animation-delay: 0.7s; +} +.pixel:nth-child(9) { + animation-delay: 0.8s; +} + + +@keyframes pixel-load { + 0% { + opacity: 0.5; + transform: scale(1); + background-color: cyan; + } + 25%{ + background-color: purple; + } + 50% { + opacity: 1; + transform: scale(1.2); + background-color: red; + } + 75%{ + background-color: yellow; + } + 100% { + opacity: 1; + transform: scale(1); + background-color: cyan; + } +} \ No newline at end of file