MoeJue/DropOut
Template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update: 通話画面にスタイルを適用

Browse Source
This commit is contained in:
yuki540 2018-04-16 18:11:40 +09:00
parent 72b527e1e7
commit 8e34cf66c6
3 changed files with 154 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/scss/keyframes/_common.scss
View File

@ -46,3 +46,8 @@
from { transform: scale(1); }
to { transform: scale(1.5); }
}
@keyframes width0-100 {
from { width: 0; }
to { width: 100%; }
}

16
src/scss/keyframes/pc/_calling.scss
View File

@ -28,3 +28,19 @@
from { width: 0; left: 50%; }
to { width: 500px; left: calc(50% - 250px); }
}
@keyframes calling__show-live-view {
from { width: 0; margin-left: 50%; margin-top: 10px; }
to { width: calc(100% - 20px); margin-left: 10px; margin-top: 10px; }
}
@keyframes calling__char-name-frame-1 {
0% { opacity: 0; transform: translate(4px, 4px); }
10% { opacity: 1; }
100% { opacity: 1; transform: translate(0px, 0px); }
}
@keyframes calling__char-name-frame-2 {
0% { opacity: 0; transform: translate(-4px, -4px); }
10% { opacity: 1; }
100% { opacity: 1; transform: translate(0px, 0px); }
}

134
src/scss/modules/pc/_calling.scss
View File

@ -195,7 +195,7 @@
/*** controls-bar ***/
.calling__controls-bar {
position: absolute;
bottom: 60px; left: 50%;
bottom: 40px; left: 50%;
width: 0px; height: 60px;
background-color: #222;
border-radius: 30px;
@ -220,6 +220,89 @@
.btn:last-child { margin-right: 0; }
}
/*** live-view ***/
.calling__live-view {
position: absolute;
left: calc(50% - 500px); top: 0;
width: 1000px; height: calc(100% - 140px);
.view {
position: absolute;
width: 50%; height: 50%;
.char {
margin-left: 50%;
margin-top: 10px;
width: 0; height: calc(100% - 20px);
border-radius: 8px;
overflow: hidden;
&::after {
content: ""; display: block;
width: 100%; height: 100%;
background-size: auto 100%;
background-position: center;
background-repeat: no-repeat;
opacity: 0;
}
}
.name {
position: absolute;
bottom: 20px; left: 20px;
width: 150px; height: 30px;
&::before,
&::after {
content: ""; display: block;
position: absolute;
width: 80%; height: 80%;
background-color: #6C9A7B;
border-radius: 20px;
opacity: 0;
}
&::before { top: -4px; left: -4px; }
&::after { bottom: -4px; right: -4px; }
span {
display: block;
position: absolute;
top: 0; left: 0;
width: 0%; height: 100%;
border-radius: 15px;
background-color: #444;
font-size: 12px;
line-height: 30px;
text-align: center;
color: #fff;
overflow: hidden;
z-index: 1;
}
}
}
.view:nth-child(1) {
top: 0; left: 0;
.char {
background-color: $theme-light-purple;
&::after { background-image: url(../images/calling/icons/yui_large.png); }
}
}
.view:nth-child(2) {
top: 0; right: 0;
.char {
background-color: $theme-mint;
&::after { background-image: url(../images/calling/icons/eriri_large.png); }
}
}
.view:nth-child(3) {
bottom: 0; left: 25%;
.char {
background-color: $theme-pink;
&::after { background-image: url(../images/calling/icons/gab_large.png); }
}
}
}
.calling[data-state="start"] {
/*** bg ***/
.calling__bg {
@ -341,5 +424,54 @@
scale0-1 0.8s ease 7.2s forwards;
}
}
/*** live-view ***/
.calling__live-view {
.view:nth-child(1) {
.char {
animation: calling__show-live-view 0.4s ease 8s forwards;
&::after {
animation:
fadein 0.3s ease 8.8s forwards,
slide-top 0.5s ease 8.8s forwards;
}
}
.name {
span { animation: width0-100 0.3s ease 9.7s forwards; }
&::before { animation: calling__char-name-frame-1 0.6s ease 10s forwards; }
&::after { animation: calling__char-name-frame-2 0.6s ease 10s forwards; }
}
}
.view:nth-child(2) {
.char {
animation: calling__show-live-view 0.4s ease 8.2s forwards;
&::after {
animation:
fadein 0.3s ease 9s forwards,
slide-right 0.5s ease 9s forwards;
}
}
.name {
span { animation: width0-100 0.3s ease 9.9s forwards; }
&::before { animation: calling__char-name-frame-1 0.6s ease 10.2s forwards; }
&::after { animation: calling__char-name-frame-2 0.6s ease 10.2s forwards; }
}
}
.view:nth-child(3) {
.char {
animation: calling__show-live-view 0.4s ease 8.4s forwards;
&::after {
animation:
fadein 0.3s ease 9.2s forwards,
slide-left 0.5s ease 9.2s forwards;
}
}
.name {
span { animation: width0-100 0.3s ease 10.1s forwards; }
&::before { animation: calling__char-name-frame-1 0.6s ease 10.4s forwards; }
&::after { animation: calling__char-name-frame-2 0.6s ease 10.4s forwards; }
}
}
}
}
}