Update styles.css

styles.css

@@ -1,4 +1,4 @@
-/* ��վȫ����ʽ */
+/* ��վȫ����ʽ */
 body {
     font-family: Arial, sans-serif;
     margin: 0;
@@ -6,7 +6,7 @@ body {
     background-color: #f4f4f4;
 }
 
-/* ������ʽ */
+/* ������ʽ */
 form {
     margin-bottom: 20px;
 }
@@ -22,7 +22,7 @@ input[type="submit"] {
     cursor: pointer;
 }
 
-/* ��������ʽ */
+/* ��������ʽ */
 h2, h3 {
     color: #333;
 }
@@ -36,35 +36,35 @@ div {
 }
 
 
-/* �������ͼ��ʽ */
+/* �������ͼ��ʽ */
 .album-thumbnail {
-    width: 100px; /* ��������ͼ�Ŀ���Ϊ30���� */
-    height: 100px; /* ��������ͼ�ĸ߶�Ϊ30���� */
-    object-fit: cover; /* ȷ��ͼƬ����ʧ�� */
+    width: 100px; /* ��������ͼ�Ŀ���Ϊ30���� */
+    height: 100px; /* ��������ͼ�ĸ߶�Ϊ30���� */
+    object-fit: cover; /* ȷ��ͼƬ����ʧ�� */
     margin-right: 10px;
 }
 
-/* �ٲ���������ʽ */
+/* �ٲ���������ʽ */
 .waterfall {
-    column-count: 4; /* �����Ը�����Ҫ�������� */
-    column-gap: 10px; /* ������֮��ļ�� */
+    column-count: 4; /* �����Ը�����Ҫ�������� */
+    column-gap: 10px; /* ������֮��ļ�� */
     margin: 0 10px;
 }
 
 .waterfall .item {
-    break-inside: avoid; /* ��ֹͼƬ���зָ� */
-    margin-bottom: 10px; /* ͼƬ��ͼƬ֮��ļ�� */
+    break-inside: avoid; /* ��ֹͼƬ���зָ� */
+    margin-bottom: 10px; /* ͼƬ��ͼƬ֮��ļ�� */
 }
 
 .waterfall img {
-    width: 300px; /* ����ͼƬ�Ŀ���Ϊ300���� */
-    height: 300px; /* ����ͼƬ�ĸ߶�Ϊ300���� */
-    object-fit: cover; /* ����ͼƬ�ı���������IJ��ֻᱻ�ü� */
-    border-radius: 5px; /* ��ѡ��ΪͼƬ����Բ�DZ߿� */
-    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* ��ѡ��ΪͼƬ������Ӱ */
+    width: 300px; /* ����ͼƬ�Ŀ���Ϊ300���� */
+    height: 300px; /* ����ͼƬ�ĸ߶�Ϊ300���� */
+    object-fit: cover; /* ����ͼƬ�ı���������IJ��ֻᱻ�ü� */
+    border-radius: 5px; /* ��ѡ��ΪͼƬ����Բ�DZ߿� */
+    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* ��ѡ��ΪͼƬ������Ӱ */
 }
 
-/* ��Ӧʽ��ƣ�������Ļ��С�����ٲ������� */
+/* ��Ӧʽ��ƣ�������Ļ��С�����ٲ������� */
 @media (max-width: 800px) {
     .waterfall {
         column-count: 2;
@@ -76,3 +76,18 @@ div {
         column-count: 1;
     }
 }
+
+@keyframes blink {
+    0%, 100% {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0;
+    }
+}
+
+#loading {
+    /* 其他样式保持不变 */
+    /* 添加动画 */
+    animation: blink 1s linear infinite;
+}