update: 「推しキャラは、私でしょ!?」にスタイルを適用

This commit is contained in:
yuki540 2018-04-16 19:04:31 +09:00
parent 1a24bb5b46
commit e5d02a8dc3
3 changed files with 46 additions and 0 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 38 KiB

View File

@ -44,3 +44,10 @@
10% { opacity: 1; }
100% { opacity: 1; transform: translate(0px, 0px); }
}
@keyframes calling__show-say {
0% { transform: scale(8); opacity: 0; }
70% { transform: scale(1); opacity: 1; }
85% { transform: scale(1.1); opacity: 1; }
100% { transform: scale(1); opacity: 1; }
}

View File

@ -303,6 +303,36 @@
}
}
.calling__say {
position: absolute;
left: -20%; top: calc(50% - 200px);
width: 140%; height: 400px;
transform: rotate(-20deg);
z-index: 5;
.line {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
transform: translateX(-100%);
}
.line:nth-child(1) { background-color: $theme-light-purple; }
.line:nth-child(2) { background-color: $theme-mint; }
.line:nth-child(3) { background-color: $theme-pink; }
.line:nth-child(4) { background-color: $theme-purple; }
.img {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background-size: auto 35%;
background-position: center;
background-repeat: no-repeat;
background-image: url(../images/calling/say.png);
opacity: 0;
}
}
.calling[data-state="start"] {
/*** bg ***/
.calling__bg {
@ -425,6 +455,15 @@
}
}
/*** say ***/
.calling__say {
.line:nth-child(1) { animation: slide-right 0.35s ease 11s forwards; }
.line:nth-child(2) { animation: slide-right 0.35s ease 11.2s forwards; }
.line:nth-child(3) { animation: slide-right 0.35s ease 11.4s forwards; }
.line:nth-child(4) { animation: slide-right 0.35s ease 11.6s forwards; }
.img { animation: calling__show-say 0.5s ease 11.9s forwards; }
}
/*** live-view ***/
.calling__live-view {
.view:nth-child(1) {