update: 「推しキャラは、私でしょ!?」にスタイルを適用
This commit is contained in:
parent
1a24bb5b46
commit
e5d02a8dc3
BIN
public/images/calling/say.png
Normal file
BIN
public/images/calling/say.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
@ -44,3 +44,10 @@
|
|||||||
10% { opacity: 1; }
|
10% { opacity: 1; }
|
||||||
100% { opacity: 1; transform: translate(0px, 0px); }
|
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; }
|
||||||
|
}
|
||||||
|
|||||||
@ -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"] {
|
.calling[data-state="start"] {
|
||||||
/*** bg ***/
|
/*** bg ***/
|
||||||
.calling__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 ***/
|
/*** live-view ***/
|
||||||
.calling__live-view {
|
.calling__live-view {
|
||||||
.view:nth-child(1) {
|
.view:nth-child(1) {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user