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

update: ガヴリールロゴの打ち消し要素にスタイルを適用

Browse Source
This commit is contained in:
yuki540 2018-04-12 16:39:59 +09:00
parent dc8a8bd01c
commit de54c035bc
2 changed files with 121 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/scss/keyframes/pc/_gab-animation.scss
View File

@ -135,3 +135,25 @@
60% { transform: scaleX(1); } 60% { transform: scaleX(1); }
100% { top: calc(50% - 30px); transform: scaleX(1.2); } 100% { top: calc(50% - 30px); transform: scaleX(1.2); }
} }
@keyframes gab-animation__show-clock-frame {
from { transform: scale(0); }
to { transform: scale(1); }
}
@keyframes gab-animation__show-clock-hand {
from { height: 0; top: 50%; }
to { height: 100%; top: 0%; }
}
@keyframes gab-animation__reverse-clock-hand {
from { transform: rotate(0deg); }
to { transform: rotate(-30deg); }
}
@keyframes gab-animation__rotate-clock-hand {
from { transform: rotate(-30deg); }
to { transform: rotate(360deg); }
}
@keyframes gab-animation__scale-clock-hand {
from { width: 10px; left: calc(50% - 5px); }
to { width: 100%; left: 0; }
}

99
src/scss/modules/pc/_gab-animation.scss
View File

@ -305,6 +305,70 @@
.paint:nth-child(3) { left: calc(50% - 50px); } .paint:nth-child(3) { left: calc(50% - 50px); }
.paint:nth-child(4) { left: calc(50% + 90px); } .paint:nth-child(4) { left: calc(50% + 90px); }
.paint:nth-child(5) { left: calc(50% + 230px); } .paint:nth-child(5) { left: calc(50% + 230px); }
.frame {
position: absolute; left: 0;
width: 100%; height: calc((100% - 300px) / 2);
overflow: hidden;
div {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
}
div:nth-child(1) { background-color: $theme-gray; }
div:nth-child(2) { background-color: $theme-bg; }
div:nth-child(3) { background-color: $theme-light-pink; }
div:nth-child(4) { background-color: $theme-pink; }
div:nth-child(5) { background-color: $theme-mint; }
}
.frame-top {
top: 0;
div { transform: translateY(100%); }
}
.frame-bottom {
bottom: 0;
div { transform: translateY(-100%); }
}
.clock {
position: absolute;
top: calc((100% - 300px) / 2); left: 0;
width: 100%; height: 300px;
&::before,
&::after {
content: ""; display: block;
position: absolute;
transform: scale(0);
}
&::before {
top: calc(50% - 100px);
left: calc(50% - 100px);
width: 200px; height: 200px;
border-radius: 50%;
box-sizing: border-box;
border: dashed 5px $theme-mint;
}
&::after {
top: calc(50% - 125px);
left: calc(50% - 125px);
width: 250px; height: 250px;
border-radius: 50%;
box-sizing: border-box;
border: solid 10px $theme-mint;
border-top-color: transparent;
border-bottom-color: transparent;
}
div {
position: absolute;
left: calc(50% - 5px); top: 50%;
width: 10px; height: 0;
background-color: $theme-mint;
z-index: 1;
}
}
} }
/************************************************************************************************* /*************************************************************************************************
@ -509,6 +573,41 @@
div:nth-child(4):after { animation: slide-bottom 0.9s ease 9.7s forwards; } div:nth-child(4):after { animation: slide-bottom 0.9s ease 9.7s forwards; }
.char:after { animation: slide-top 1.8s ease-out 9.7s reverse forwards; } .char:after { animation: slide-top 1.8s ease-out 9.7s reverse forwards; }
} }
.frame-top {
div:nth-child(1) { animation: slide-top 0.4s ease 12.5s forwards; }
div:nth-child(2) { animation: slide-top 0.4s ease 12.6s forwards; }
div:nth-child(3) { animation: slide-top 0.4s ease 12.7s forwards; }
div:nth-child(4) { animation: slide-top 0.4s ease 12.8s forwards; }
div:nth-child(5) { animation: slide-top 0.4s ease 12.9s forwards; }
}
.frame-bottom {
div:nth-child(1) { animation: slide-bottom 0.4s ease 12.5s forwards; }
div:nth-child(2) { animation: slide-bottom 0.4s ease 12.6s forwards; }
div:nth-child(3) { animation: slide-bottom 0.4s ease 12.7s forwards; }
div:nth-child(4) { animation: slide-bottom 0.4s ease 12.8s forwards; }
div:nth-child(5) { animation: slide-bottom 0.4s ease 12.9s forwards; }
}
.clock {
&::before {
animation:
gab-animation__show-clock-frame 0.5s ease 13.3s forwards,
rotate360 4s linear 13.8s infinite;
}
&::after {
animation:
gab-animation__show-clock-frame 0.5s ease 13.4s forwards,
rotate360 3s linear 13.9s infinite;
}
div {
animation:
gab-animation__show-clock-hand 0.3s ease 14s forwards,
gab-animation__reverse-clock-hand 0.4s ease 14.3s forwards,
gab-animation__rotate-clock-hand 0.3s ease-out 14.7s forwards,
gab-animation__scale-clock-hand 0.4s ease 14.8s forwards;
}
}
} }
} }
} }