add css animation on the home page

2 years ago · f990a93835
1 changed files with 137 additions and 0 deletions
--- a/public/index.php
+++ b/public/index.php
@ -106,6 +106,127 @@ $placeholder = Filter::plural($totalPages, [sprintf(_('Over %s page or enter the
				@@ -106,6 +106,127 @@ $placeholder = Filter::plural($totalPages, [sprintf(_('Over %s page or enter the
        color: #fff;
      }

+      /*
+       * CSS animation
+       * by https://codepen.io/alvarotrigo/pen/GRvYNax
+       */
+
+      main {
+        background: #2e3436;
+        background: -webkit-linear-gradient(to left, #8f94fb, #4e54c8);
+        width: 100%;
+      }
+
+      ul {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+        z-index:-1
+      }
+
+      li {
+        position: absolute;
+        display: block;
+        list-style: none;
+        width: 20px;
+        height: 20px;
+        background: rgba(255, 255, 255, 0.2);
+        animation: animate 25s linear infinite;
+          bottom: -150px;
+      }
+
+      li:nth-child(1) {
+        left: 25%;
+        width: 80px;
+        height: 80px;
+        animation-delay: 0s;
+      }
+
+      li:nth-child(2) {
+        left: 10%;
+        width: 20px;
+        height: 20px;
+        animation-delay: 2s;
+        animation-duration: 12s;
+      }
+
+      li:nth-child(3) {
+        left: 70%;
+        width: 20px;
+        height: 20px;
+        animation-delay: 4s;
+      }
+
+      li:nth-child(4) {
+        left: 40%;
+        width: 60px;
+        height: 60px;
+        animation-delay: 0s;
+        animation-duration: 18s;
+      }
+
+      li:nth-child(5) {
+        left: 65%;
+        width: 20px;
+        height: 20px;
+        animation-delay: 0s;
+      }
+
+      li:nth-child(6) {
+        left: 75%;
+        width: 110px;
+        height: 110px;
+        animation-delay: 3s;
+      }
+
+      li:nth-child(7) {
+        left: 35%;
+        width: 150px;
+        height: 150px;
+        animation-delay: 7s;
+      }
+
+      li:nth-child(8) {
+        left: 50%;
+        width: 25px;
+        height: 25px;
+        animation-delay: 15s;
+        animation-duration: 45s;
+      }
+
+      li:nth-child(9) {
+        left: 20%;
+        width: 15px;
+        height: 15px;
+        animation-delay: 2s;
+        animation-duration: 35s;
+      }
+
+      li:nth-child(10) {
+        left: 85%;
+        width: 150px;
+        height: 150px;
+        animation-delay: 0s;
+        animation-duration: 11s;
+      }
+
+      @keyframes animate {
+        0%{
+          transform: translateY(0) rotate(0deg);
+          opacity: 1;
+          border-radius: 0;
+        }
+
+        100%{
+          transform: translateY(-1000px) rotate(720deg);
+          opacity: 0;
+          border-radius: 50%;
+        }
+      }
+
    </style>
  </head>
  <body>
@ -116,6 +237,22 @@ $placeholder = Filter::plural($totalPages, [sprintf(_('Over %s page or enter the
				@@ -116,6 +237,22 @@ $placeholder = Filter::plural($totalPages, [sprintf(_('Over %s page or enter the
        <button type="submit"><?php echo _('Search') ?></button>
      </form>
    </header>
+    <!-- css animation : begin -->
+    <main>
+      <ul>
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+      </ul>
+    </main>
+    <!-- css animation : end -->
    <footer>
      <a href="https://github.com/d47081/YGGo/issues"><?php echo _('meow') ?></a>
    </footer>