AnthonyDuan/taiko-web
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Scoresheet: Add characters

Browse Source
This commit is contained in:
LoveEevee
2019-01-01 04:16:55 +03:00
parent 47e939a77c
commit 9e8242b136
6 changed files with 241 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
public/src/css/songbg.css
View File

@@ -166,3 +166,112 @@
.donbg-fastscroll .donlayer2{
animation: 1s linear donbg-scroll infinite;
}
#tetsuohana{
position: absolute;
right: calc(-12px * var(--scale));
left: calc(-12px * var(--scale));
margin: auto;
z-index: 1;
overflow: hidden;
pointer-events: none;
top: calc(50% - 15px * var(--scale));
width: calc(1304px * var(--scale));
height: calc(375px * var(--scale));
--frame: 0;
--low: calc(36px * var(--scale));
}
#tetsuo,
#hana{
position: absolute;
top: 0;
width: calc(292px * var(--scale));
height: calc(425px * var(--scale));
background-repeat: no-repeat;
background-size: calc(292px * var(--scale) * 2);
background-position-y: calc(-425px * var(--frame) * var(--scale));
transform: translateY(calc(360px * var(--scale)));
}
#tetsuo{
left: calc(173px * var(--scale));
}
#hana{
right: calc(178px * var(--scale));
background-position-x: calc(-292px * var(--scale));
}
#mikoshi{
position: absolute;
top: 0;
left: calc(390px * var(--scale));
width: calc(553px * var(--scale));
height: calc(416px * var(--scale));
background-repeat: no-repeat;
background-size: contain;
transform: translateY(calc(461px * var(--scale)));
}
#flowers1,
#flowers2{
position: absolute;
top: calc(218px * var(--scale));
width: calc(483px * var(--scale));
height: calc(159px * var(--scale));
background-repeat: no-repeat;
background-size: calc(483px * var(--scale));
background-position-y: calc(-159px * var(--frame) * var(--scale));
transform: translateY(calc(243px * var(--scale))) scaleX(var(--flip));
--frame: 0;
}
#flowers1{
left: 0;
--flip: 1;
}
#flowers2{
right: calc(4px * var(--scale));
--flip: -1;
}
#tetsuohana.fadein,
#tetsuohana.dance,
#tetsuohana.failed{
height: calc(461px * var(--scale));
}
#tetsuohana.fadein #tetsuo,
#tetsuohana.fadein #hana{
transition: 0.5s transform cubic-bezier(0.2, 0.6, 0.4, 1.2);
transform: translateY(var(--low));
}
@keyframes tetsuohana-dance1{
0%{transform: translateY(var(--low))}
50%{transform: translateY(0)}
}
@keyframes tetsuohana-dance2{
50%{transform: translateY(0)}
100%{transform: translateY(var(--low))}
}
@keyframes tetsuohana-flowers{
0%{--frame: 0}
50%{--frame: 1}
100%{--frame: 2}
}
#tetsuohana.dance #tetsuo,
#tetsuohana.dance #hana{
--frame: 1;
transform: translateY(var(--low));
animation: 0.5s ease-out tetsuohana-dance1 infinite, 0.5s ease-in tetsuohana-dance2 infinite;
}
#tetsuohana.dance #flowers1,
#tetsuohana.dance #flowers2{
transform: translateY(0) scaleX(var(--flip));
animation: 0.25s 0.4s tetsuohana-flowers both;
transition: 0.34s transform ease-out;
}
#tetsuohana.dance #mikoshi{
transform: translateY(var(--low));
transition: 0.4s 0.4s transform ease-out;
animation: 0.5s 0.8s ease-out tetsuohana-dance1 infinite, 0.5s 0.8s ease-in tetsuohana-dance2 infinite;
}
#tetsuohana.failed #tetsuo,
#tetsuohana.failed #hana{
--frame: 2;
transition: 0.5s transform cubic-bezier(0.2, 0.6, 0.4, 1.2);
transform: translateY(var(--low));
}