From f4051118a414214ac85c3d7db0c04fc873a05521 Mon Sep 17 00:00:00 2001 From: s1n Date: Sun, 28 Jul 2019 19:16:07 +0200 Subject: add doge in space lol --- doge/css/main.css | 159 +++++++++++++++++++++++++++++++++++++++++++++++++++++ doge/css/main.scss | 104 +++++++++++++++++++++++++++++++++++ 2 files changed, 263 insertions(+) create mode 100644 doge/css/main.css create mode 100644 doge/css/main.scss (limited to 'doge/css') diff --git a/doge/css/main.css b/doge/css/main.css new file mode 100644 index 0000000..d182707 --- /dev/null +++ b/doge/css/main.css @@ -0,0 +1,159 @@ +body { + background-image: url("http://fay.io/w/space.jpg"); + background-repeat: repeat; + background-position: top center; +} + +.rotate-container-1 { + -webkit-animation: shrink 6s linear infinite, fade 6s linear infinite; + animation: shrink 6s linear infinite, fade 6s linear infinite; +} + +.rotate-container-1 .rotate { + -webkit-animation: spin 6s linear infinite; + animation: spin 6s linear infinite; +} + +.rotate-container-1 .rotate-object { + background: url("http://fay.io/w/doge.png") no-repeat; + background-size: 100%; +} + +.rotate-container-2 { + -webkit-animation: shrink 6s linear infinite 2s, fade 6s linear infinite 2s; + animation: shrink 6s linear infinite 2s, fade 6s linear infinite 2s; +} + +.rotate-container-2 .rotate { + -webkit-animation: spin 6s linear infinite 2s; + animation: spin 6s linear infinite 2s; +} + +.rotate-container-2 .rotate-object { + background: url("http://fay.io/w/wrecking-ball(1).png") no-repeat; + background-size: 100%; +} + +.rotate-container-3 { + -webkit-animation: shrink 6s linear infinite 4s, fade 6s linear infinite 4s; + animation: shrink 6s linear infinite 4s, fade 6s linear infinite 4s; +} + +.rotate-container-3 .rotate { + -webkit-animation: spin 6s linear infinite 2s; + animation: spin 6s linear infinite 2s; +} + +.rotate-container-3 .rotate-object { + background: url("http://fay.io/w/grumpy-cat.png") no-repeat; + background-size: 100%; +} + +.rotate-container { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + width: 1em; + height: 1em; + margin: auto; + -webkit-backface-visibility: hidden; + -webkit-perspective: 1000; +} + +.rotate { + position: absolute; + top: 50%; + left: 50%; + width: 1em; + height: 20em; + margin-left: -.5em; + -webkit-transform-origin: 50% 0; + transform-origin: 50% 0; +} + +.rotate-object { + position: absolute; + bottom: 0; + left: 50%; + width: 5em; + height: 5em; + margin-left: -2.5em; + -webkit-animation: spin 20s linear infinite; + animation: spin 20s linear infinite; +} + +@-webkit-keyframes spin { + from { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + to { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} + +@keyframes spin { + from { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + to { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} + +@-webkit-keyframes shrink { + from { + -webkit-transform: scale(3); + transform: scale(3); + } + to { + -webkit-transform: scale(0); + transform: scale(0); + } +} + +@keyframes shrink { + from { + -webkit-transform: scale(3); + transform: scale(3); + } + to { + -webkit-transform: scale(0); + transform: scale(0); + } +} + +@-webkit-keyframes fade { + 0% { + opacity: 0; + } + 5% { + opacity: 1; + } + 80% { + opacity: 1; + } + 100% { + opacity: 0; + } +} + +@keyframes fade { + 0% { + opacity: 0; + } + 5% { + opacity: 1; + } + 80% { + opacity: 1; + } + 100% { + opacity: 0; + } +} diff --git a/doge/css/main.scss b/doge/css/main.scss new file mode 100644 index 0000000..2153e46 --- /dev/null +++ b/doge/css/main.scss @@ -0,0 +1,104 @@ +body { + background-image: url('http://fay.io/w/space.jpg'); + background-repeat: repeat; + background-position: top center; + } + + .rotate-container-1 { + animation: shrink 6s linear infinite, + fade 6s linear infinite; + .rotate { + animation: spin 6s linear infinite; + } + .rotate-object { + background: url('http://fay.io/w/doge.png') no-repeat; + background-size: 100%; + } + } + + .rotate-container-2 { + animation: shrink 6s linear infinite 2s, + fade 6s linear infinite 2s; + .rotate { + animation: spin 6s linear infinite 2s; + } + .rotate-object { + background: url('http://fay.io/w/wrecking-ball(1).png') no-repeat; + background-size: 100%; + } + } + + .rotate-container-3 { + animation: shrink 6s linear infinite 4s, + fade 6s linear infinite 4s; + .rotate { + animation: spin 6s linear infinite 2s; + } + .rotate-object { + background: url('http://fay.io/w/grumpy-cat.png') no-repeat; + background-size: 100%; + } + } + + .rotate-container { + position: absolute; + top: 0; left: 0; right: 0; bottom: 0; + width: 1em; + height: 1em; + margin: auto; + -webkit-backface-visibility: hidden; + -webkit-perspective: 1000; + } + + .rotate { + position: absolute; + top: 50%;; + left: 50%; + width: 1em; + height: 20em; + margin-left: -.5em; + transform-origin: 50% 0; + } + + .rotate-object { + position: absolute; + bottom: 0; + left: 50%; + width: 5em; + height: 5em; + margin-left: -2.5em; + animation: spin 20s linear infinite; + } + + @keyframes spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } + } + + @keyframes shrink { + from { + transform: scale( 3 ); + } + to { + transform: scale( 0 ); + } + } + + @keyframes fade { + 0% { + opacity: 0; + } + 5% { + opacity: 1; + } + 80% { + opacity: 1; + } + 100% { + opacity: 0; + } + } \ No newline at end of file -- cgit v1.2.3