346 lines
9.8 KiB
SCSS
346 lines
9.8 KiB
SCSS
@include pc-layout {
|
|
.calling {
|
|
position: absolute;
|
|
top: 0; left: 0;
|
|
width: 100%; height: 100%;
|
|
min-width: $min-width; min-height: $min-height;
|
|
background-color: $theme-purple;
|
|
overflow: hidden;
|
|
z-index: 1001;
|
|
}
|
|
|
|
/*** bg ***/
|
|
.calling__bg {
|
|
position: absolute;
|
|
top: 0; left: 0;
|
|
width: 100%; height: 100%;
|
|
|
|
div {
|
|
position: relative;
|
|
float: left;
|
|
width: 25%; height: 25%;
|
|
overflow: hidden;
|
|
|
|
&::after {
|
|
content: ""; display: block;
|
|
width: 100%; height: 100%;
|
|
background-color: #333;
|
|
transform: translateX(-100%);
|
|
}
|
|
}
|
|
|
|
&::after { content: ""; display: block; clear: both; }
|
|
}
|
|
|
|
/*** controls-btn ***/
|
|
.calling__controls-btn {
|
|
position: absolute;
|
|
bottom: 100px; 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); }
|
|
}
|
|
|
|
.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 ***/
|
|
.calling__icons {
|
|
position: absolute;
|
|
top: 100px; left: calc(50% - 400px);
|
|
width: 800px; height: 150px;
|
|
|
|
.icon-box {
|
|
position: relative;
|
|
margin-right: 100px;
|
|
float: left;
|
|
width: 200px; height: 200px;
|
|
|
|
.icon {
|
|
position: absolute;
|
|
width: 100%; height: 100%;
|
|
background-color: #fff;
|
|
border-radius: 50%;
|
|
transform: scale(0);
|
|
z-index: 1;
|
|
|
|
&::after {
|
|
margin: 5px;
|
|
content: ""; display: block;
|
|
width: calc(100% - 10px); height: calc(100% - 10px);
|
|
background-size: cover;
|
|
background-position: center;
|
|
border-radius: 50%;
|
|
transform: scale(0);
|
|
}
|
|
}
|
|
|
|
.name {
|
|
position: absolute;
|
|
left: 50px; bottom: -50px;
|
|
width: 100px; height: 30px;
|
|
font-size: 16px;
|
|
text-align: center;
|
|
line-height: 30px;
|
|
color: #fff;
|
|
overflow: hidden;
|
|
|
|
span { display: block; transform: translateY(100%); }
|
|
&::after {
|
|
position: absolute;
|
|
bottom: 0; left: 0;
|
|
content: ""; display: block;
|
|
width: 100%; height: 1px;
|
|
transform: translateX(-100%);
|
|
}
|
|
}
|
|
|
|
&::before,
|
|
&::after {
|
|
content: ""; display: block;
|
|
position: absolute;
|
|
width: calc(100% - 70px); height: calc(100% - 70px);
|
|
background-color: #fff;
|
|
border-radius: 50%;
|
|
opacity: 0;
|
|
}
|
|
&::before { top: -5px; left: -5px; }
|
|
&::after { bottom: -5px; right: -5px; }
|
|
}
|
|
.icon-box:last-child { margin-right: 0; }
|
|
.icon-box:nth-child(1) {
|
|
.icon:after {
|
|
background-color: $theme-light-purple;
|
|
background-image: url(../images/calling/icons/yui.png);
|
|
}
|
|
.name:after { background-color: $theme-light-purple; }
|
|
}
|
|
.icon-box:nth-child(2) {
|
|
.icon:after {
|
|
background-color: $theme-pink;
|
|
background-image: url(../images/calling/icons/gab.png);
|
|
}
|
|
.name:after { background-color: $theme-pink; }
|
|
}
|
|
.icon-box:nth-child(3) {
|
|
.icon:after {
|
|
background-color: $theme-mint;
|
|
background-image: url(../images/calling/icons/eriri.png);
|
|
}
|
|
.name:after { background-color: $theme-mint; }
|
|
}
|
|
}
|
|
|
|
/*** controls-bar ***/
|
|
.calling__controls-bar {
|
|
position: absolute;
|
|
bottom: 60px; left: 50%;
|
|
width: 0px; height: 60px;
|
|
background-color: #222;
|
|
border-radius: 30px;
|
|
|
|
.inner {
|
|
width: 280px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.btn {
|
|
float: left;
|
|
width: 60px; height: 60px;
|
|
font-size: 25px;
|
|
text-align: center;
|
|
line-height: 60px;
|
|
color: #999;
|
|
display: block;
|
|
margin-right: 50px;
|
|
opacity: 0;
|
|
}
|
|
.btn .fa-phone { transform: rotate(225deg); color: #af5853; font-size: 30px; }
|
|
.btn:last-child { margin-right: 0; }
|
|
}
|
|
|
|
.calling[data-state="start"] {
|
|
/*** bg ***/
|
|
.calling__bg {
|
|
div:nth-child(1):after,
|
|
div:nth-child(2):after,
|
|
div:nth-child(3):after,
|
|
div:nth-child(4):after { animation: slide-right 0.4s ease 0s forwards; }
|
|
div:nth-child(5):after,
|
|
div:nth-child(6):after,
|
|
div:nth-child(7):after,
|
|
div:nth-child(8):after { animation: slide-right 0.4s ease 0.1s forwards; }
|
|
div:nth-child(9):after,
|
|
div:nth-child(10):after,
|
|
div:nth-child(11):after,
|
|
div:nth-child(12):after { animation: slide-right 0.4s ease 0.2s forwards; }
|
|
div:nth-child(13):after,
|
|
div:nth-child(14):after,
|
|
div:nth-child(15):after,
|
|
div:nth-child(16):after { animation: slide-right 0.4s ease 0.3s forwards; }
|
|
}
|
|
|
|
/*** 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 {
|
|
animation:
|
|
scale0-0dot5 0.3s ease 2.5s alternate 2 forwards,
|
|
scale0-1 0.5s ease 3.1s forwards;
|
|
&::after {
|
|
animation:
|
|
scale0-0dot5 0.3s ease 3.3s alternate 2 forwards,
|
|
scale0-1 0.5s ease 3.9s forwards;
|
|
}
|
|
}
|
|
.name {
|
|
span { animation: slide-top 0.7s ease 4.5s forwards; }
|
|
&::after { animation: slide-right 0.3s ease 4.6s forwards; }
|
|
}
|
|
&::before { animation: calling__icon-frame-1 0.8s ease 4s forwards; }
|
|
&::after { animation: calling__icon-frame-2 0.8s ease 4.1s forwards; }
|
|
}
|
|
.icon-box:nth-child(2) {
|
|
.icon {
|
|
animation:
|
|
scale0-0dot5 0.3s ease 1.5s alternate 2 forwards,
|
|
scale0-1 0.5s ease 2.1s forwards;
|
|
&::after {
|
|
animation:
|
|
scale0-0dot5 0.3s ease 2.3s alternate 2 forwards,
|
|
scale0-1 0.5s ease 2.9s forwards;
|
|
}
|
|
}
|
|
.name {
|
|
span { animation: slide-top 0.7s ease 3.5s forwards; }
|
|
&::after { animation: slide-right 0.3s ease 3.6s forwards; }
|
|
}
|
|
&::before { animation: calling__icon-frame-1 0.8s ease 3s forwards; }
|
|
&::after { animation: calling__icon-frame-2 0.8s ease 3.1s forwards; }
|
|
}
|
|
.icon-box:nth-child(3) {
|
|
.icon {
|
|
animation:
|
|
scale0-0dot5 0.3s ease 3.5s alternate 2 forwards,
|
|
scale0-1 0.5s ease 4.1s forwards;
|
|
&::after {
|
|
animation:
|
|
scale0-0dot5 0.3s ease 4.3s alternate 2 forwards,
|
|
scale0-1 0.5s ease 4.9s forwards;
|
|
}
|
|
}
|
|
.name {
|
|
span { animation: slide-top 0.7s ease 5.5s forwards; }
|
|
&::after { animation: slide-right 0.3s ease 5.6s forwards; }
|
|
}
|
|
&::before { animation: calling__icon-frame-1 0.8s ease 5s forwards; }
|
|
&::after { animation: calling__icon-frame-2 0.8s ease 5.1s forwards; }
|
|
}
|
|
}
|
|
|
|
/*** controls-btn ***/
|
|
.calling__controls-btn {
|
|
animation: fadeout 0.5s ease 6.6s forwards;
|
|
.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 {
|
|
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(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; }
|
|
}
|
|
.touch { animation: calling__touch-btn 0.6s ease 5.9s forwards; }
|
|
}
|
|
|
|
/*** controls-bar ***/
|
|
.calling__controls-bar {
|
|
animation: calling__show-controls-bar 0.4s ease 6.6s forwards;
|
|
div:nth-child(1) {
|
|
animation:
|
|
fadein 0.8s ease 7s forwards,
|
|
scale0-1 0.8s ease 7s forwards;
|
|
}
|
|
div:nth-child(2) {
|
|
animation:
|
|
fadein 0.8s ease 7.4s forwards,
|
|
scale0-1 0.8s ease 7.4s forwards;
|
|
}
|
|
div:nth-child(3) {
|
|
animation:
|
|
fadein 0.8s ease 7.2s forwards,
|
|
scale0-1 0.8s ease 7.2s forwards;
|
|
}
|
|
}
|
|
}
|
|
}
|