From 63d6c825525716713fba894daab527003d807351 Mon Sep 17 00:00:00 2001
From: yuki540 <tabletennis540@gmail.com>
Date: Wed, 18 Apr 2018 11:13:16 +0900
Subject: [PATCH] =?UTF-8?q?update:=20=E3=83=88=E3=83=83=E3=83=97=E3=83=9A?=
 =?UTF-8?q?=E3=83=BC=E3=82=B8=E3=81=AE=E3=83=AA=E3=83=B3=E3=82=B0=E3=81=AB?=
 =?UTF-8?q?=E3=82=B9=E3=82=BF=E3=82=A4=E3=83=AB=E3=82=92=E9=81=A9=E7=94=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/scss/keyframes/pc/_top-page.scss |  8 +++
 src/scss/modules/pc/_top-page.scss   | 95 ++++++++++++++++++++++++++++
 2 files changed, 103 insertions(+)
 create mode 100644 src/scss/keyframes/pc/_top-page.scss
 create mode 100644 src/scss/modules/pc/_top-page.scss

diff --git a/src/scss/keyframes/pc/_top-page.scss b/src/scss/keyframes/pc/_top-page.scss
new file mode 100644
index 0000000..02d8502
--- /dev/null
+++ b/src/scss/keyframes/pc/_top-page.scss
@@ -0,0 +1,8 @@
+@keyframes top-page__show-ring {
+  from { transform: translateY(200px); opacity: 0; }
+  to   { transform: translateY(0px); opacity: 1; }
+}
+@keyframes top-page__rotate-ring {
+  from { transform: rotate(0deg) scale(1.2); }
+  to   { transform: rotate(360deg) scale(1.2); }
+}
diff --git a/src/scss/modules/pc/_top-page.scss b/src/scss/modules/pc/_top-page.scss
new file mode 100644
index 0000000..b08fce9
--- /dev/null
+++ b/src/scss/modules/pc/_top-page.scss
@@ -0,0 +1,95 @@
+@include pc-layout {
+  .top-page {
+    position: absolute;
+    top: 0; left: 0;
+    width: 100%; height: 100%;
+    background-color: $theme-bg;
+    overflow: hidden;
+    z-index: 1001;
+
+    &::before {
+      content: ""; display: block;
+      width: 100%; height: 100%;
+      background-image: url(../images/bg.png);
+      background-size: 15px;
+      opacity: 0.4;
+    }
+  }
+
+  /*** ring ***/
+  .top-page__ring {
+    position: absolute;
+    top: calc(50% - 325px); left: calc(50% - 325px);
+    width: 650px; height: 650px;
+    border-radius: 50%;
+
+    .wrap {
+      position: absolute;
+      top: 0; left: 0;
+      width: 100%; height: 100%;
+
+      .inner {
+        position: absolute;
+        top: 0; left: 0;
+        width: 100%; height: 100%;
+
+        div {
+          position: absolute;
+          top: 0; left: 0;
+          width: 100%; height: 100%;
+          &::after {
+            position: absolute;
+            top: 0px; left: calc(50% - 50px);
+            content: ""; display: block;
+            width: 0; height: 0;
+            border-top: solid 120px transparent;
+            border-left: solid 45px transparent;
+            border-right: solid 45px transparent;
+            opacity: 0;
+          }
+        }
+        div:nth-child(1n):after { border-top-color: $theme-pink; }
+        div:nth-child(2n):after { border-top-color: $theme-light-pink; }
+        div:nth-child(3n):after { border-top-color: $theme-purple; }
+        div:nth-child(4n):after { border-top-color: $theme-light-purple; }
+        div:nth-child(5n):after { border-top-color: $theme-gray; }
+        div:nth-child(1)  { transform: rotate(0deg); }
+        div:nth-child(2)  { transform: rotate(10deg); }
+        div:nth-child(3)  { transform: rotate(30deg); }
+        div:nth-child(4)  { transform: rotate(40deg); }
+        div:nth-child(5)  { transform: rotate(60deg); }
+        div:nth-child(6)  { transform: rotate(70deg); }
+        div:nth-child(7)  { transform: rotate(90deg); }
+        div:nth-child(8)  { transform: rotate(100deg); }
+        div:nth-child(9)  { transform: rotate(120deg); }
+        div:nth-child(10) { transform: rotate(130deg); }
+        div:nth-child(11) { transform: rotate(150deg); }
+        div:nth-child(12) { transform: rotate(160deg); }
+        div:nth-child(13) { transform: rotate(180deg); }
+        div:nth-child(14) { transform: rotate(190deg); }
+        div:nth-child(15) { transform: rotate(210deg); }
+        div:nth-child(16) { transform: rotate(220deg); }
+        div:nth-child(17) { transform: rotate(240deg); }
+        div:nth-child(18) { transform: rotate(250deg); }
+        div:nth-child(19) { transform: rotate(270deg); }
+        div:nth-child(20) { transform: rotate(280deg); }
+        div:nth-child(21) { transform: rotate(300deg); }
+        div:nth-child(22) { transform: rotate(310deg); }
+        div:nth-child(23) { transform: rotate(330deg); }
+        div:nth-child(24) { transform: rotate(340deg); }
+      }
+      .inner { transform: scale(1.2); }
+    }
+  }
+
+  .top-page[data-state="start"] {
+    /*** ring ***/
+    .top-page__ring {
+      .inner { 
+        animation: top-page__rotate-ring 150s linear 0s infinite;
+        div:nth-child(1n):after { animation: top-page__show-ring 0.4s ease 0s forwards; }
+        div:nth-child(2n):after { animation: top-page__show-ring 0.4s ease 0.05s forwards; }
+      }
+    }
+  }
+}