diff --git a/packages/client/src/pages/welcome.entrance.a.vue b/packages/client/src/pages/welcome.entrance.a.vue index 0fa25a549..790f0b9c1 100644 --- a/packages/client/src/pages/welcome.entrance.a.vue +++ b/packages/client/src/pages/welcome.entrance.a.vue @@ -225,9 +225,19 @@ export default defineComponent({ > .main { position: relative; width: min(480px, 100%); - margin: auto auto auto 128px; box-shadow: 0 12px 32px rgb(0 0 0 / 25%); + margin: 0 0 auto 0; + animation: moveX 5s linear 0s infinite alternate, moveY 6.4s linear 0s infinite alternate; + + @keyframes moveX { + from { left: 0; } to { left: calc(100vw - 480px); } + } + + @keyframes moveY { + from { top: 0; } to { top: calc(100vh - 510px); } + } + @media (max-width: 1200px) { margin: auto; } @@ -318,58 +328,5 @@ export default defineComponent({ } } -._button,.mk-emoji,.text,span,._panel,.havbbuyv,.note,.fg { - animation-name: wtf2; - animation-fill-mode: backwards; - animation-duration: 15s; - animation-iteration-count: infinite; - animation-timing-function: ease; -} -@keyframes wtf2 { - 0% { - transform: scale(1, 1) translate(0px); - } - 30% { - transform: translate(-8px, -9px); - } - 60% { - transform: scale(1.1, 1.1) translate(10px, 10px); - } - 90% { - transform: scale(0.9, 0.9) translate(-2px, 6px); - } - 100% { - transform: scale(1, 1) translate(0px, 0px); - } -} -.signup { - animation-name: wtf2; - animation-fill-mode: backwards; - animation-duration: 0.1s; - animation-iteration-count: infinite; - animation-timing-function: ease; -} - -//2022-wtf - -._button:hover { - animation-name: wtf; - animation-fill-mode: forwards; - animation-duration: 0.5s; - animation-timing-function: ease; - animation-iteration-count: infinite; -} - -@keyframes wtf { - 0% { - transform: scale(1, 1) translate(0px); - } - 10% { - transform: scale(0, 0) translate(2px); - } - 100% { - transform: scale(1, 1) translate(900px); - } -} diff --git a/packages/client/src/pages/welcome.entrance.b.vue b/packages/client/src/pages/welcome.entrance.b.vue index e43603fc0..b5db7b6e3 100644 --- a/packages/client/src/pages/welcome.entrance.b.vue +++ b/packages/client/src/pages/welcome.entrance.b.vue @@ -178,6 +178,17 @@ export default defineComponent({ color: #fff; font-size: 1.1em; + margin: 0 0 auto 0; + animation: moveX 5s linear 0s infinite alternate, moveY 6.4s linear 0s infinite alternate; + + @keyframes moveX { + from { left: 0; } to { left: calc(100vw - 480px); } + } + + @keyframes moveY { + from { top: 0; } to { top: calc(100vh - 510px); } + } + @media (max-width: 1200px) { margin: auto; } @@ -234,58 +245,5 @@ export default defineComponent({ } } -._button,.mk-emoji,.text,span,._panel,.havbbuyv,.note,.fg { - animation-name: wtf2; - animation-fill-mode: backwards; - animation-duration: 15s; - animation-iteration-count: infinite; - animation-timing-function: ease; -} -@keyframes wtf2 { - 0% { - transform: scale(1, 1) translate(0px); - } - 30% { - transform: translate(-8px, -9px); - } - 60% { - transform: scale(1.1, 1.1) translate(10px, 10px); - } - 90% { - transform: scale(0.9, 0.9) translate(-2px, 6px); - } - 100% { - transform: scale(1, 1) translate(0px, 0px); - } -} -.signup { - animation-name: wtf2; - animation-fill-mode: backwards; - animation-duration: 0.1s; - animation-iteration-count: infinite; - animation-timing-function: ease; -} - -//2022-wtf - -._button:hover { - animation-name: wtf; - animation-fill-mode: forwards; - animation-duration: 0.5s; - animation-timing-function: ease; - animation-iteration-count: infinite; -} - -@keyframes wtf { - 0% { - transform: scale(1, 1) translate(0px); - } - 10% { - transform: scale(0, 0) translate(2px); - } - 100% { - transform: scale(1, 1) translate(900px); - } -} diff --git a/packages/client/src/pages/welcome.entrance.c.vue b/packages/client/src/pages/welcome.entrance.c.vue index 13c43ffad..1e9425292 100644 --- a/packages/client/src/pages/welcome.entrance.c.vue +++ b/packages/client/src/pages/welcome.entrance.c.vue @@ -190,7 +190,17 @@ export default defineComponent({ > .main { position: relative; width: min(460px, 100%); - margin: auto; + + margin: 0 0 auto 0; + animation: moveX 5s linear 0s infinite alternate, moveY 6.4s linear 0s infinite alternate; + + @keyframes moveX { + from { left: 0; } to { left: calc(100vw - 480px); } + } + + @keyframes moveY { + from { top: 0; } to { top: calc(100vh - 510px); } + } > .misskey { width: 150px; @@ -303,58 +313,4 @@ export default defineComponent({ } } -._button,.mk-emoji,.text,span,._panel,.havbbuyv,.note,.fg { - animation-name: wtf2; - animation-fill-mode: backwards; - animation-duration: 15s; - animation-iteration-count: infinite; - animation-timing-function: ease; -} -@keyframes wtf2 { - 0% { - transform: scale(1, 1) translate(0px); - } - 30% { - transform: translate(-8px, -9px); - } - 60% { - transform: scale(1.1, 1.1) translate(10px, 10px); - } - 90% { - transform: scale(0.9, 0.9) translate(-2px, 6px); - } - 100% { - transform: scale(1, 1) translate(0px, 0px); - } -} - -.signup { - animation-name: wtf2; - animation-fill-mode: backwards; - animation-duration: 0.1s; - animation-iteration-count: infinite; - animation-timing-function: ease; -} - -//2022-wtf - -._button:hover { - animation-name: wtf; - animation-fill-mode: forwards; - animation-duration: 0.5s; - animation-timing-function: ease; - animation-iteration-count: infinite; -} - -@keyframes wtf { - 0% { - transform: scale(1, 1) translate(0px); - } - 10% { - transform: scale(0, 0) translate(2px); - } - 100% { - transform: scale(1, 1) translate(900px); - } -}