sim1222/test1
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix: edit welcome animation

Browse Source
This commit is contained in:
こけっち 2022-05-24 22:27:17 +09:00
parent 11127ae87a
commit 14cb8262c1
No known key found for this signature in database
GPG Key ID: 21460619C5FC4DD1
3 changed files with 33 additions and 162 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
packages/client/src/pages/welcome.entrance.a.vue
View File

@ -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);
}
}
</style>

64
packages/client/src/pages/welcome.entrance.b.vue
View File

@ -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);
}
}
</style>

66
packages/client/src/pages/welcome.entrance.c.vue
View File

@ -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);
}
}
</style>