From 4bf75b15d7c04862dbb2f896bf66df6c81cac8d6 Mon Sep 17 00:00:00 2001
From: Chen Yang <yc4646@gmail.com>
Date: Sat, 20 Apr 2024 21:37:38 +0800
Subject: [PATCH] Addd page bottom animation.

---
 index.html |  11 +++-
 style.css  | 148 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 158 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index 71c94a3..feb0252 100644
--- a/index.html
+++ b/index.html
@@ -229,9 +229,18 @@ href="https://papers.ssrn.com/sol3/papers.cfm?abstract_id=1786012" target="_blan
 </ul>
 </p>
 
-<hr class="curve">
+<!-- <hr class="curve"> -->
 
 <div align="right"><font size="-1"></font></div>
 
+<div class="container">
+  <div class="ball"></div>
+  <div class="ball"></div>
+  <div class="ball"></div>
+  <div class="ball"></div>
+  <div class="ball"></div>
+  <div class="ball"></div>
+  <div class="ball"></div>
+</div>
 </body>
 </html>
diff --git a/style.css b/style.css
index 22d718f..5266cdf 100755
--- a/style.css
+++ b/style.css
@@ -191,3 +191,151 @@ background-repeat: no-repeat;
   right: 10px;
   left: auto;
 }
+
+.container {
+  width: 200px;
+  height: 200px;
+  padding-top: 0px;
+  margin: 0 auto;
+  -webkit-transform: rotate(90deg);
+  -moz-transform: rotate(90deg);
+  -o-transform: rotate(90deg);
+  -ms-transform: rotate(90deg);
+  transform: rotate(90deg);
+}
+
+#container_rotate {
+  -webkit-transform: rotate(90deg);
+  -moz-transform: rotate(90deg);
+  -o-transform: rotate(90deg);
+  -ms-transform: rotate(90deg);
+  transform: rotate(90deg);
+}
+
+.ball {
+  width: 10px;
+  height: 10px;
+  margin: 10px auto;
+  border-radius: 50px;
+}
+
+.ball:nth-child(1) {
+  background: #000000;
+  -webkit-animation: right 1s infinite ease-in-out;
+  -moz-animation: right 1s infinite ease-in-out;
+  animation: right 1s infinite ease-in-out;
+}
+
+.ball:nth-child(2) {
+  background: #000000;
+  -webkit-animation: left 1.1s infinite ease-in-out;
+  -moz-animation: left 1.1s infinite ease-in-out;
+  animation: left 1.1s infinite ease-in-out;
+}
+
+.ball:nth-child(3) {
+  background: #000000;
+  -webkit-animation: right 1.05s infinite ease-in-out;
+  -moz-animation: right 1.05s infinite ease-in-out;
+  animation: right 1.05s infinite ease-in-out;
+}
+
+.ball:nth-child(4) {
+  background: #000000;
+  -webkit-animation: left 1.15s infinite ease-in-out;
+  -moz-animation: left 1.15s infinite ease-in-out;
+  animation: left 1.15s infinite ease-in-out;
+}
+
+.ball:nth-child(5) {
+  background: #000000;
+  -webkit-animation: right 1.1s infinite ease-in-out;
+  -moz-animation: right 1.1s infinite ease-in-out;
+  animation: right 1.1s infinite ease-in-out;
+}
+
+.ball:nth-child(6) {
+  background: #000000;
+  -webkit-animation: left 1.05s infinite ease-in-out;
+  -moz-animation: left 1.05s infinite ease-in-out;
+  animation: left 1.05s infinite ease-in-out;
+}
+
+.ball:nth-child(7) {
+  background: #000000;
+  -webkit-animation: right 1s infinite ease-in-out;
+  -moz-animation: right 1s infinite ease-in-out;
+  animation: right 1s infinite ease-in-out;
+}
+
+@-webkit-keyframes right {
+  0% {
+    -webkit-transform: translate(-15px);
+  }
+  50% {
+    -webkit-transform: translate(15px);
+  }
+  100% {
+    -webkit-transform: translate(-15px);
+  }
+}
+
+@-webkit-keyframes left {
+  0% {
+    -webkit-transform: translate(15px);
+  }
+  50% {
+    -webkit-transform: translate(-15px);
+  }
+  100% {
+    -webkit-transform: translate(15px);
+  }
+}
+
+@-moz-keyframes right {
+  0% {
+    -moz-transform: translate(-15px);
+  }
+  50% {
+    -moz-transform: translate(15px);
+  }
+  100% {
+    -moz-transform: translate(-15px);
+  }
+}
+
+@-moz-keyframes left {
+  0% {
+    -moz-transform: translate(15px);
+  }
+  50% {
+    -moz-transform: translate(-15px);
+  }
+  100% {
+    -moz-transform: translate(15px);
+  }
+}
+
+@keyframes right {
+  0% {
+    transform: translate(-15px);
+  }
+  50% {
+    transform: translate(15px);
+  }
+  100% {
+    transform: translate(-15px);
+  }
+}
+
+@keyframes left {
+  0% {
+    transform: translate(15px);
+  }
+  50% {
+    transform: translate(-15px);
+  }
+  100% {
+    transform: translate(15px);
+  }
+}
\ No newline at end of file