update

css/card.css

@@ -54,14 +54,22 @@
   height: 20vmin;
   justify-content: center;
   align-items: center;
-  animation: HeaBeat 2s linear infinite;
 }
 
 .card>.heart>.ani {
+  position: absolute;
+  width: 4vmin;
+  height: 4vmin;
+  background-color: red;
+  animation: HeaBeat 1s linear infinite;
+}
+
+.card>.heart>.ani:nth-of-type(2) {
+  position: absolute;
   width: 4vmin;
   height: 4vmin;
   background-color: red;
-  transform: rotate(45deg);
+  animation: HeaBeat2 1s linear infinite;
 }
 
 .card>.heart>.ani::before {
@@ -86,23 +94,23 @@
 
 @keyframes HeaBeat {
   0% {
-    transform: scale(1);
-  }
-
-  25% {
-    transform: scale(1.25);
+    transform: scale(1) rotate(45deg);
   }
 
-  50% {
-    transform: scale(1.5);
+  100% {
+    transform: scale(1.5) rotate(45deg);
   }
+}
 
-  75% {
-    transform: scale(1.25);
+@keyframes HeaBeat2 {
+  0% {
+    transform: scale(1) rotate(45deg);
+    opacity: 1;
   }
 
   100% {
-    transform: scale(1);
+    transform: scale(2.3) rotate(45deg);
+    opacity: 0;
   }
 }
 

index.html

@@ -23,6 +23,7 @@
     </div>
     <div class="heart">
       <div class="ani"></div>
+      <div class="ani"></div>
     </div>
     <div class="head-img">
       <div class="img-y"></div>
@@ -48,8 +49,9 @@
   <div class="page">
     <div class="time">
       <div class="title">
-        2024.04.05 ~ 2024.08.18
+          这是我们一起走过的
       </div>
+      <div id="time"></div>
     </div>
     <div class="jump">
       <a href="./pages/clover.html">情书</a>

pages/story.html

@@ -21,7 +21,7 @@ <h3 class="subtitle">我们的故事</h3>
     <div class="timeline"></div>
 
     <div class="bottom">
-      <h2 class="endtitle">故事就此结束</h2>
+      <h2 class="endtitle">我们的故事，未完待续……</h2>
     </div>
   </div>
   </div>

scripts/time.js

@@ -1,13 +1,13 @@
 window.addEventListener("load", () => {
   function calculate_time_from_now() {
-    let time_now = new Date('August 18, 2024 23:31:00');
+    let time_now = new Date();
     let date_targer = new Date('April 5, 2024 22:00:00');
     let time_diff = time_now.getTime() - date_targer.getTime();
     let days = Math.floor(time_diff / (1000 * 60 * 60 * 24));
     let hours = Math.floor(time_diff % (1000 * 60 * 60 * 24) / (1000 * 60 * 60));
     let minutes = Math.floor(time_diff % (1000 * 60 * 60) / (1000 * 60));
     let seconds = Math.floor(time_diff % (1000 * 60) / 1000);
-    time.innerText = days + "天" + hours + "时" + minutes + "分";
+    time.innerText = days + "天" + hours + "时" + minutes + "分" + seconds + "秒";
   }
 
   calculate_time_from_now();