diff options
| author | s1n <[email protected]> | 2019-07-28 19:16:07 +0200 |
|---|---|---|
| committer | GitHub <[email protected]> | 2019-07-28 19:16:07 +0200 |
| commit | f4051118a414214ac85c3d7db0c04fc873a05521 (patch) | |
| tree | 4791882905394e95117643058a93d278f7754ab1 /doge/css/main.scss | |
| parent | add dino game actually (diff) | |
| download | s1n.pw-admin-f4051118a414214ac85c3d7db0c04fc873a05521.tar.xz s1n.pw-admin-f4051118a414214ac85c3d7db0c04fc873a05521.zip | |
add doge in space lol
Diffstat (limited to 'doge/css/main.scss')
| -rw-r--r-- | doge/css/main.scss | 104 |
1 files changed, 104 insertions, 0 deletions
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 |