MoeJue/DropOut
Template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update: sp用に修正

Browse Source
This commit is contained in:
yuki540 2018-04-17 21:46:33 +09:00
parent d4f691d29a
commit f1f48384f1
1 changed files with 9 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/scss/modules/tablet/_end-animation.scss
View File

@ -1,4 +1,4 @@
@include tablet-layout { @include sp-layout {
.end-animation { .end-animation {
position: absolute; position: absolute;
top: 0; left: 0; top: 0; left: 0;
@ -21,7 +21,7 @@
.text-ball { .text-ball {
position: absolute; position: absolute;
width: 180px; height: 180px; width: 90px; height: 90px;
border-radius: 50%; border-radius: 50%;
opacity: 0; opacity: 0;
@ -31,7 +31,7 @@
width: 100%; height: 100%; width: 100%; height: 100%;
background-color: #F0EFE7; background-color: #F0EFE7;
border-radius: 50%; border-radius: 50%;
border: solid 10px #F0EFE7; border: solid 5px #F0EFE7;
box-sizing: border-box; box-sizing: border-box;
overflow: hidden; overflow: hidden;
@ -56,23 +56,23 @@
} }
} }
.text-ball:nth-child(1) { .text-ball:nth-child(1) {
top: 50px; left: 50px; top: 25px; left: 25px;
.inner:after { background-image: url(../images/end-animation/end-roll/1.png); } .inner:after { background-image: url(../images/end-animation/end-roll/1.png); }
} }
.text-ball:nth-child(2) { .text-ball:nth-child(2) {
top: 50px; right: 50px; top: 25px; right: 25px;
.inner:after { background-image: url(../images/end-animation/end-roll/2.png); } .inner:after { background-image: url(../images/end-animation/end-roll/2.png); }
} }
.text-ball:nth-child(3) { .text-ball:nth-child(3) {
bottom: 50px; left: 50px; bottom: 25px; left: 25px;
.inner:after { background-image: url(../images/end-animation/end-roll/3.png); } .inner:after { background-image: url(../images/end-animation/end-roll/3.png); }
} }
} }
.paints { .paints {
position: absolute; position: absolute;
top: calc(50% - 60px); left: calc(50% - 60px); top: calc(50% - 40px); left: calc(50% - 40px);
width: 120px; height: 120px; width: 80px; height: 80px;
div { div {
float: left; float: left;
@ -100,7 +100,7 @@
img { img {
display: block; display: block;
height: 200px; height: 100px;
position: absolute; position: absolute;
bottom: 30px; right: 0px; bottom: 30px; right: 0px;
transform: rotateZ(-20deg); transform: rotateZ(-20deg);