diff --git a/Art/CDay-87/Bounce_Animation.gif b/Art/CDay-87/Bounce_Animation.gif new file mode 100644 index 000000000..d8ecf4f85 Binary files /dev/null and b/Art/CDay-87/Bounce_Animation.gif differ diff --git a/Art/CDay-87/index.html b/Art/CDay-87/index.html new file mode 100644 index 000000000..3c429ec08 --- /dev/null +++ b/Art/CDay-87/index.html @@ -0,0 +1,18 @@ + + + + + + Bouncing Screensaver + + + +
+
+ ZTM Logo + + diff --git a/Art/CDay-87/style.css b/Art/CDay-87/style.css new file mode 100644 index 000000000..ec2089692 --- /dev/null +++ b/Art/CDay-87/style.css @@ -0,0 +1,105 @@ +html, +body { + margin: 0; + padding: 0; +} + +.bg-gradient { + height: 100vh; + width: 100%; + background-image: linear-gradient(#e7266c, #2ac075); +} + +:root { + --width: 300px; + --x-speed: 13s; + --y-speed: 7s; + --transition-speed: 2.2s; +} + +var { + width: var(--width); + height: var(--width); +} + +img { + display: block; + width: 100px; + height: 100px; + border-radius: 50%; + position: absolute; + + -webkit-animation: moveX 8s linear 0s infinite alternate, + moveY 7.6s linear 0s infinite alternate; + -moz-animation: moveX 8s linear 0s infinite alternate, + moveY 7.6s linear 0s infinite alternate; + -o-animation: moveX 8s linear 0s infinite alternate, + moveY 7.6s linear 0s infinite alternate; + animation: moveX 8s linear 0s infinite alternate, + moveY 7.6s linear 0s infinite alternate; +} + +@-webkit-keyframes moveX { + from { + left: calc(100% - 100px); + } + to { + left: 0; + } +} +@-moz-keyframes moveX { + from { + left: calc(100% - 100px); + } + to { + left: 0; + } +} +@-o-keyframes moveX { + from { + left: calc(100% - 100px); + } + to { + left: 0; + } +} +@keyframes moveX { + from { + left: calc(100% - 100px); + } + to { + left: 0; + } +} +@-webkit-keyframes moveY { + from { + top: 0; + } + to { + top: calc(100% - 100px); + } +} +@-moz-keyframes moveY { + from { + top: 0; + } + to { + top: calc(100% - 100px); + } +} +@-o-keyframes moveY { + from { + top: 0; + } + to { + top: calc(100% - 100px); + } +} +@keyframes moveY { + from { + top: 0; + } + to { + top: calc(100% - 100px); + } +} diff --git a/include.js b/include.js index 0872e3258..e1aa405a7 100644 --- a/include.js +++ b/include.js @@ -40,6 +40,13 @@ let cards = [ imageLink: './Art/ChipoJ/star_fall.gif', author: 'ChipoJ', githubLink: 'https://github.com/Chipoj' + }, + { + artName: 'Bouncing Screensaver', + pageLink: './Art/CDay-87/index.html', + imageLink: './Art/CDay87/Bounce_Animation.gif', + author: 'CDay-87', + githubLink: 'https://github.com/CDay-87' } ];