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

update: callingの応答ボタンにスタイルを適用

Browse Source
This commit is contained in:
yuki540 2018-04-15 14:44:41 +09:00
parent e8aabeb74a
commit 8acd60ce6e
2 changed files with 89 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -0,0 +1,8 @@
@keyframes calling__show-btn-1 {
from { transform: rotate(180deg) scale(2); opacity: 0; }
to { transform: rotate(180deg) scale(1); opacity: 1; }
}
@keyframes calling__show-btn-2 {
from { transform: rotate(45deg) scale(2); opacity: 0; }
to { transform: rotate(45deg) scale(1); opacity: 1; }
}

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

@ -31,6 +31,69 @@
&::after { content: ""; display: block; clear: both; } &::after { content: ""; display: block; clear: both; }
} }
/*** controls-btn ***/
.calling__controls-btn {
position: absolute;
bottom: 200px; left: calc(50% - 250px);
width: 500px; height: 80px;
.btn {
position: absolute; top: 0;
width: 80px; height: 80px;
overflow: hidden;
border-radius: 15px;
transform: rotate(45deg);
.fa-phone {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
font-size: 45px;
text-align: center;
line-height: 80px;
display: block;
opacity: 0;
}
div {
position: absolute;
&::after {
content: ""; display: block;
width: 100%; height: 100%;
background-color: rgba(255,255,255,0.6);
}
}
div:nth-child(1),
div:nth-child(3) { left: 0; width: 100%; height: 2px; }
div:nth-child(2),
div:nth-child(4) { top: 0; width: 2px; height: 100%; }
div:nth-child(1) {
top: 0;
&::after { transform: translateX(100%); }
}
div:nth-child(2) {
left: 0;
&::after { transform: translateY(-100%); }
}
div:nth-child(3) {
bottom: 0;
&::after { transform: translateX(-100%); }
}
div:nth-child(4) {
right: 0;
&::after { transform: translateX(100%); }
}
}
.btn-1 {
left: 0;
.fa-phone { color: #af5853; transform: rotate(180deg); }
}
.btn-2 {
right: 0;
.fa-phone { color: #6C9A7B; transform: rotate(45deg); }
}
}
.calling[data-state="start"] { .calling[data-state="start"] {
/*** bg ***/ /*** bg ***/
.calling__bg { .calling__bg {
@ -51,5 +114,23 @@
div:nth-child(15):after, div:nth-child(15):after,
div:nth-child(16):after { animation: slide-right 0.4s ease 0.3s forwards; } div:nth-child(16):after { animation: slide-right 0.4s ease 0.3s forwards; }
} }
/*** controls-btn ***/
.calling__controls-btn {
.btn-1 {
div:nth-child(1):after { animation: slide-left 0.6s ease 0.7s forwards; }
div:nth-child(2):after { animation: slide-bottom 0.6s ease 0.7s forwards; }
div:nth-child(3):after { animation: slide-right 0.6s ease 0.7s forwards; }
div:nth-child(4):after { animation: slide-top 0.6s ease 0.7s forwards; }
.fa-phone { animation: calling__show-btn-1 0.7s ease 1s forwards; }
}
.btn-2 {
div:nth-child(1):after { animation: slide-left 0.6s ease 0.9s forwards; }
div:nth-child(2):after { animation: slide-bottom 0.6s ease 0.9s forwards; }
div:nth-child(3):after { animation: slide-right 0.6s ease 0.9s forwards; }
div:nth-child(4):after { animation: slide-top 0.6s ease 0.9s forwards; }
.fa-phone { animation: calling__show-btn-2 0.7s ease 1.2s forwards; }
}
}
} }
} }