add: タブレット版のスタイルシートをコピー
This commit is contained in:
yuki540
parent
79035d8038
commit
d4f691d29a
0
src/scss/keyframes/sp/_end-animation.scss
Normal file
0
src/scss/keyframes/sp/_end-animation.scss
Normal file
194
src/scss/modules/sp/_end-animation.scss
Normal file
194
src/scss/modules/sp/_end-animation.scss
Normal file
@ -0,0 +1,194 @@
|
||||
@include tablet-layout {
|
||||
.end-animation {
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
width: 100%; height: 100%;
|
||||
overflow: hidden;
|
||||
z-index: 997;
|
||||
}
|
||||
|
||||
/*** end-roll ***/
|
||||
.end-animation__end-roll {
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
width: 100%; height: 100%;
|
||||
background-color: $theme-mint;
|
||||
|
||||
.text-balls {
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
width: 100%; height: 100%;
|
||||
|
||||
.text-ball {
|
||||
position: absolute;
|
||||
width: 180px; height: 180px;
|
||||
border-radius: 50%;
|
||||
opacity: 0;
|
||||
|
||||
.inner {
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
width: 100%; height: 100%;
|
||||
background-color: #F0EFE7;
|
||||
border-radius: 50%;
|
||||
border: solid 10px #F0EFE7;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
|
||||
.bg { width: 100%; height: 100%; }
|
||||
.bg div {
|
||||
width: 100%; height: 10%;
|
||||
background-color: #EBC1C7;
|
||||
margin-bottom: 10%;
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: ""; display: block;
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
width: 100%; height: 100%;
|
||||
background-size: 60%;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.text-ball:nth-child(1) {
|
||||
top: 50px; left: 50px;
|
||||
.inner:after { background-image: url(../images/end-animation/end-roll/1.png); }
|
||||
}
|
||||
.text-ball:nth-child(2) {
|
||||
top: 50px; right: 50px;
|
||||
.inner:after { background-image: url(../images/end-animation/end-roll/2.png); }
|
||||
}
|
||||
.text-ball:nth-child(3) {
|
||||
bottom: 50px; left: 50px;
|
||||
.inner:after { background-image: url(../images/end-animation/end-roll/3.png); }
|
||||
}
|
||||
}
|
||||
|
||||
.paints {
|
||||
position: absolute;
|
||||
top: calc(50% - 60px); left: calc(50% - 60px);
|
||||
width: 120px; height: 120px;
|
||||
|
||||
div {
|
||||
float: left;
|
||||
width: calc(50% - 5px); height: calc(50% - 5px);
|
||||
margin-right: 10px;
|
||||
border-radius: 50%;
|
||||
opacity: 0;
|
||||
}
|
||||
div:nth-child(1),
|
||||
div:nth-child(2) { margin-bottom: 10px; }
|
||||
div:nth-child(2n) { margin-right: 0; }
|
||||
div:nth-child(1) { background-color: $theme-pink; }
|
||||
div:nth-child(2) { background-color: $theme-light-purple; }
|
||||
div:nth-child(3) { background-color: $theme-purple; }
|
||||
div:nth-child(4) { background-color: $theme-light-pink; }
|
||||
}
|
||||
|
||||
.window {
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
width: 100%; height: 100%;
|
||||
background-color: $theme-bg;
|
||||
transform: translateY(-100%);
|
||||
perspective: 1500px;
|
||||
|
||||
img {
|
||||
display: block;
|
||||
height: 200px;
|
||||
position: absolute;
|
||||
bottom: 30px; right: 0px;
|
||||
transform: rotateZ(-20deg);
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: ""; display: block;
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
width: 100%; height: 100%;
|
||||
background-image: url(../images/bg.png);
|
||||
background-size: 15px;
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.end-animation[data-state="start"] {
|
||||
/*** end-roll ***/
|
||||
.end-animation__end-roll {
|
||||
animation:
|
||||
end-animation__end-roll-color-1 0.5s ease 1.2s forwards,
|
||||
end-animation__end-roll-color-2 0.5s ease 2.1s forwards,
|
||||
end-animation__end-roll-color-3 0.5s ease 3s forwards,
|
||||
end-animation__end-roll-color-4 0.5s ease 3.9s forwards;
|
||||
|
||||
.text-balls {
|
||||
.text-ball:nth-child(1) {
|
||||
animation: end-animation__move-text-ball-1 0.4s ease 1.2s forwards;
|
||||
.inner {
|
||||
animation: end-animation__jump-text-ball-1 0.4s ease 1.2s forwards;
|
||||
&::after { animation: fadein 0.5s ease 1.6s forwards; }
|
||||
}
|
||||
.bg div:nth-child(1) { animation: slide-right 0.3s ease 1.6s forwards; }
|
||||
.bg div:nth-child(2) { animation: slide-right 0.3s ease 1.65s forwards; }
|
||||
.bg div:nth-child(3) { animation: slide-right 0.3s ease 1.7s forwards; }
|
||||
.bg div:nth-child(4) { animation: slide-right 0.3s ease 1.75s forwards; }
|
||||
.bg div:nth-child(5) { animation: slide-right 0.3s ease 1.8s forwards; }
|
||||
}
|
||||
.text-ball:nth-child(2) {
|
||||
animation: end-animation__move-text-ball-2 0.4s ease 2.1s forwards;
|
||||
.inner {
|
||||
animation: end-animation__jump-text-ball-2 0.4s ease 2.1s forwards;
|
||||
&::after { animation: fadein 0.5s ease 2.5s forwards; }
|
||||
}
|
||||
.bg div:nth-child(1) { animation: slide-right 0.3s ease 2.5s forwards; }
|
||||
.bg div:nth-child(2) { animation: slide-right 0.3s ease 2.55s forwards; }
|
||||
.bg div:nth-child(3) { animation: slide-right 0.3s ease 2.6s forwards; }
|
||||
.bg div:nth-child(4) { animation: slide-right 0.3s ease 2.65s forwards; }
|
||||
.bg div:nth-child(5) { animation: slide-right 0.3s ease 2.7s forwards; }
|
||||
}
|
||||
.text-ball:nth-child(3) {
|
||||
animation: end-animation__move-text-ball-3 0.4s ease 3s forwards;
|
||||
.inner {
|
||||
animation: end-animation__jump-text-ball-3 0.4s ease 3s forwards;
|
||||
&::after { animation: fadein 0.5s ease 3.4s forwards; }
|
||||
}
|
||||
.bg div:nth-child(1) { animation: slide-right 0.3s ease 3.4s forwards; }
|
||||
.bg div:nth-child(2) { animation: slide-right 0.3s ease 3.45s forwards; }
|
||||
.bg div:nth-child(3) { animation: slide-right 0.3s ease 3.5s forwards; }
|
||||
.bg div:nth-child(4) { animation: slide-right 0.3s ease 3.55s forwards; }
|
||||
.bg div:nth-child(5) { animation: slide-right 0.3s ease 3.6s forwards; }
|
||||
}
|
||||
}
|
||||
|
||||
.paints {
|
||||
div:nth-child(1) {
|
||||
animation:
|
||||
end-animation__show-paint 0.6s ease 0s forwards,
|
||||
scale0-1 0.5s ease-out 1.2s reverse forwards;
|
||||
}
|
||||
div:nth-child(2) {
|
||||
animation:
|
||||
end-animation__show-paint 0.4s ease 0.2s forwards,
|
||||
scale0-1 0.5s ease-out 2.1s reverse forwards;
|
||||
}
|
||||
div:nth-child(3) {
|
||||
animation:
|
||||
end-animation__show-paint 0.4s ease 0.4s forwards,
|
||||
scale0-1 0.5s ease-out 3s reverse forwards;
|
||||
}
|
||||
div:nth-child(4) { animation: end-animation__show-paint 0.4s ease 0.6s forwards; }
|
||||
}
|
||||
|
||||
.window {
|
||||
animation: end-animation__down-window 0.5s ease-out 4.2s forwards;
|
||||
img { animation: end-animation__end 0.5s ease 4.7s forwards; }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user