From efa483361aefb985f1f96d7e646ce887ab262535 Mon Sep 17 00:00:00 2001 From: oOXxTNTxXOo Date: Wed, 30 Oct 2024 09:52:42 -0600 Subject: [PATCH 1/3] gravity words --- Art/TNT's-Gravity/index.html | 14 ++++++++ Art/TNT's-Gravity/meta.json | 5 +++ Art/TNT's-Gravity/style.css | 62 ++++++++++++++++++++++++++++++++++++ 3 files changed, 81 insertions(+) create mode 100644 Art/TNT's-Gravity/index.html create mode 100644 Art/TNT's-Gravity/meta.json create mode 100644 Art/TNT's-Gravity/style.css diff --git a/Art/TNT's-Gravity/index.html b/Art/TNT's-Gravity/index.html new file mode 100644 index 000000000..347c2164c --- /dev/null +++ b/Art/TNT's-Gravity/index.html @@ -0,0 +1,14 @@ + + + + Word Gravity + + + + + +
+

hi

+
+ + diff --git a/Art/TNT's-Gravity/meta.json b/Art/TNT's-Gravity/meta.json new file mode 100644 index 000000000..cb1c0fcbe --- /dev/null +++ b/Art/TNT's-Gravity/meta.json @@ -0,0 +1,5 @@ +{ + "githubHandle": "TNT", + "artName": "Word Gravity" + } + \ No newline at end of file diff --git a/Art/TNT's-Gravity/style.css b/Art/TNT's-Gravity/style.css new file mode 100644 index 000000000..9efc8a8c5 --- /dev/null +++ b/Art/TNT's-Gravity/style.css @@ -0,0 +1,62 @@ +body { + background-color: rgb(0, 0, 0); +} + +.format{ + display: flex; + margin-left: 8%; + text-align: left; + animation changercolor linear infinite; + +} + +@keyframes changercolor { + 0%{ + background-color: red; + color: cyan; + } + 25%{ + background-color: yellow; + color: purple; + } + 50%{ + background-color: cyan; + color: red; + } + 75%{ + background-color: purple; + color: yellow; + } + 100%{ + background-color: red; + color: cyan; + } +} + +/* Falling animation */ +@keyframes fall { + 0% { + transform: translateY(0); + opacity: 1; + } + 20% { + transform: translateY(20%); + opacity: 0.8; + } + 40% { + transform: translateY(40%); + opacity: 0.6; + } + 60% { + transform: translateY(60%); + opacity: 0.4; + } + 80% { + transform: translateY(80%); + opacity: 0.2; + } + 100% { + transform: translateY(100%); + opacity: 0; + } + } \ No newline at end of file From 330a410c5dcd7deca8fe7d6281c6d31fe0ae36f8 Mon Sep 17 00:00:00 2001 From: oOXxTNTxXOo Date: Thu, 31 Oct 2024 03:50:20 +0000 Subject: [PATCH 2/3] tnt's animation --- Art/TNT's-Gravity/index.html | 14 --- Art/TNT's-Gravity/style.css | 62 ------------- Art/oOXxTNTxXOo-colorchange/index.html | 24 +++++ .../meta.json | 2 +- Art/oOXxTNTxXOo-colorchange/style.css | 91 +++++++++++++++++++ 5 files changed, 116 insertions(+), 77 deletions(-) delete mode 100644 Art/TNT's-Gravity/index.html delete mode 100644 Art/TNT's-Gravity/style.css create mode 100644 Art/oOXxTNTxXOo-colorchange/index.html rename Art/{TNT's-Gravity => oOXxTNTxXOo-colorchange}/meta.json (52%) create mode 100644 Art/oOXxTNTxXOo-colorchange/style.css diff --git a/Art/TNT's-Gravity/index.html b/Art/TNT's-Gravity/index.html deleted file mode 100644 index 347c2164c..000000000 --- a/Art/TNT's-Gravity/index.html +++ /dev/null @@ -1,14 +0,0 @@ - - - - Word Gravity - - - - - -
-

hi

-
- - diff --git a/Art/TNT's-Gravity/style.css b/Art/TNT's-Gravity/style.css deleted file mode 100644 index 9efc8a8c5..000000000 --- a/Art/TNT's-Gravity/style.css +++ /dev/null @@ -1,62 +0,0 @@ -body { - background-color: rgb(0, 0, 0); -} - -.format{ - display: flex; - margin-left: 8%; - text-align: left; - animation changercolor linear infinite; - -} - -@keyframes changercolor { - 0%{ - background-color: red; - color: cyan; - } - 25%{ - background-color: yellow; - color: purple; - } - 50%{ - background-color: cyan; - color: red; - } - 75%{ - background-color: purple; - color: yellow; - } - 100%{ - background-color: red; - color: cyan; - } -} - -/* Falling animation */ -@keyframes fall { - 0% { - transform: translateY(0); - opacity: 1; - } - 20% { - transform: translateY(20%); - opacity: 0.8; - } - 40% { - transform: translateY(40%); - opacity: 0.6; - } - 60% { - transform: translateY(60%); - opacity: 0.4; - } - 80% { - transform: translateY(80%); - opacity: 0.2; - } - 100% { - transform: translateY(100%); - opacity: 0; - } - } \ No newline at end of file diff --git a/Art/oOXxTNTxXOo-colorchange/index.html b/Art/oOXxTNTxXOo-colorchange/index.html new file mode 100644 index 000000000..a06db1d5a --- /dev/null +++ b/Art/oOXxTNTxXOo-colorchange/index.html @@ -0,0 +1,24 @@ + + + + Word Gravity + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+ + diff --git a/Art/TNT's-Gravity/meta.json b/Art/oOXxTNTxXOo-colorchange/meta.json similarity index 52% rename from Art/TNT's-Gravity/meta.json rename to Art/oOXxTNTxXOo-colorchange/meta.json index cb1c0fcbe..e78230e65 100644 --- a/Art/TNT's-Gravity/meta.json +++ b/Art/oOXxTNTxXOo-colorchange/meta.json @@ -1,5 +1,5 @@ { - "githubHandle": "TNT", + "githubHandle": "oOXxTNTxXOo", "artName": "Word Gravity" } \ No newline at end of file diff --git a/Art/oOXxTNTxXOo-colorchange/style.css b/Art/oOXxTNTxXOo-colorchange/style.css new file mode 100644 index 000000000..ba1f0ceea --- /dev/null +++ b/Art/oOXxTNTxXOo-colorchange/style.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 From fd822f1641f79a3fcdc6b2040c92322ef8357c8b Mon Sep 17 00:00:00 2001 From: oOXxTNTxXOo Date: Thu, 31 Oct 2024 07:45:30 -0600 Subject: [PATCH 3/3] updated Names --- Art/oOXxTNTxXOo-colorchange/index.html | 5 ++--- Art/oOXxTNTxXOo-colorchange/meta.json | 2 +- Art/oOXxTNTxXOo-colorchange/{style.css => styles.css} | 0 3 files changed, 3 insertions(+), 4 deletions(-) rename Art/oOXxTNTxXOo-colorchange/{style.css => styles.css} (100%) diff --git a/Art/oOXxTNTxXOo-colorchange/index.html b/Art/oOXxTNTxXOo-colorchange/index.html index a06db1d5a..27cd9ec80 100644 --- a/Art/oOXxTNTxXOo-colorchange/index.html +++ b/Art/oOXxTNTxXOo-colorchange/index.html @@ -1,11 +1,10 @@ - Word Gravity - + colorchange + -
diff --git a/Art/oOXxTNTxXOo-colorchange/meta.json b/Art/oOXxTNTxXOo-colorchange/meta.json index e78230e65..c2bfacbfa 100644 --- a/Art/oOXxTNTxXOo-colorchange/meta.json +++ b/Art/oOXxTNTxXOo-colorchange/meta.json @@ -1,5 +1,5 @@ { "githubHandle": "oOXxTNTxXOo", - "artName": "Word Gravity" + "artName": "colorchange" } \ No newline at end of file diff --git a/Art/oOXxTNTxXOo-colorchange/style.css b/Art/oOXxTNTxXOo-colorchange/styles.css similarity index 100% rename from Art/oOXxTNTxXOo-colorchange/style.css rename to Art/oOXxTNTxXOo-colorchange/styles.css