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 16:29:13 +09:00
parent da2184def2
commit 6ebe7ff720
3 changed files with 28 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -34,6 +34,10 @@
from { transform: scale(0); } from { transform: scale(0); }
to { transform: scale(0.5); } to { transform: scale(0.5); }
} }
@keyframes scale1-0dot5 {
from { transform: scale(1); }
to { transform: scale(0.5); }
}
@keyframes scale10 { @keyframes scale10 {
from { transform: scale(1); } from { transform: scale(1); }
to { transform: scale(10); } to { transform: scale(10); }

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

@ -6,6 +6,14 @@
from { transform: rotate(45deg) scale(2); opacity: 0; } from { transform: rotate(45deg) scale(2); opacity: 0; }
to { transform: rotate(45deg) scale(1); opacity: 1; } to { transform: rotate(45deg) scale(1); opacity: 1; }
} }
@keyframes calling__touch-btn {
from { border-width: 40px; opacity: 0; transform: scale(0.6); }
to { border-width: 0px; opacity: 0.8; transform: scale(3); }
}
@keyframes calling__press-btn {
from { transform: scale(1) rotate(45deg); opacity: 1; }
to { transform: scale(0.6) rotate(45deg); opacity: 0.6; }
}
@keyframes calling__icon-frame-1 { @keyframes calling__icon-frame-1 {
from { transform: scale(0) translate(-5px, 5px); opacity: 0; } from { transform: scale(0) translate(-5px, 5px); opacity: 0; }
@ -15,3 +23,4 @@
from { transform: scale(0) translate(5px, -5px); opacity: 0; } from { transform: scale(0) translate(5px, -5px); opacity: 0; }
to { transform: scale(1) translate(0); opacity: 1; } to { transform: scale(1) translate(0); opacity: 1; }
} }

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

@ -93,6 +93,16 @@
right: 0; right: 0;
.fa-phone { color: #6C9A7B; transform: rotate(45deg); } .fa-phone { color: #6C9A7B; transform: rotate(45deg); }
} }
.touch {
position: absolute;
top: 0; right: 0;
width: 80px; height: 80px;
border-radius: 50%;
border: solid 40px #fff;
box-sizing: border-box;
opacity: 0;
}
} }
/*** icons ***/ /*** icons ***/
@ -205,6 +215,8 @@
/*** icons ***/ /*** icons ***/
.calling__icons { .calling__icons {
animation: fadeout 0.5s ease 6.6s forwards;
.icon-box .name { animation: fadeout 0.5s ease 6.6s forwards; }
.icon-box:nth-child(1) { .icon-box:nth-child(1) {
.icon { .icon {
animation: animation:
@ -263,6 +275,7 @@
/*** controls-btn ***/ /*** controls-btn ***/
.calling__controls-btn { .calling__controls-btn {
animation: fadeout 0.5s ease 6.6s forwards;
.btn-1 { .btn-1 {
div:nth-child(1):after { animation: slide-left 0.6s ease 0.7s forwards; } 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(2):after { animation: slide-bottom 0.6s ease 0.7s forwards; }
@ -271,12 +284,14 @@
.fa-phone { animation: calling__show-btn-1 0.7s ease 1s forwards; } .fa-phone { animation: calling__show-btn-1 0.7s ease 1s forwards; }
} }
.btn-2 { .btn-2 {
animation: calling__press-btn 0.3s ease 5.9s alternate 2 forwards;
div:nth-child(1):after { animation: slide-left 0.6s ease 0.9s forwards; } 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(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(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; } 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; } .fa-phone { animation: calling__show-btn-2 0.7s ease 1.2s forwards; }
} }
.touch { animation: calling__touch-btn 0.6s ease 5.9s forwards; }
} }
} }
} }