Main Page/styles.css: Difference between revisions

← Older edit Newer edit →

@@ Line 3: / Line 3: @@
 	font-weight: bold;
 }
-.scrolling-text {
+.text-container {
-        overflow: hidden; /* 隐藏溢出的内容 */
+    position: absolute;
-        height: 50px; /* 设置固定高度以限制滚动区域 */
+    top: 50%;
-        border: 1px solid #000; /* 为清晰起见添加边框 */
+    left: 50%;
-        position: relative; /* 设置相对定位 */
+    transform: translate(-50%, -50%);
-     }
+    width: 200px;
+    height: 50px;
+    overflow: hidden;
+}
+.text {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 24px;
+    animation: slide 6s infinite;
+}
+.text:nth-child(2) {
+     animation-delay: 2s;
+}
-.scrolling-text span {
+.text:nth-child(3) {
-	display: inline-block;
+    animation-delay: 4s;
-	position: absolute; /* 绝对定位以实现移动效果 */
-	top: -100%; /* 从容器顶部开始 */
-	animation: scroll-text 5s linear infinite; /* 定义动画 */
 }
-@keyframes scroll-text {
+@keyframes slide {
-% {
+%, 33.33% {
-		top: -100%; /* 从容器顶部开始 */
+        opacity: 1;
-		}
+        transform: translateY(0);
-% {
+    }
-		top: 100%; /* 向下滚动到容器底部 */
+.67%, 50% {
-	}
+        opacity: 0;
+        transform: translateY(-100%);
+    }
+.33%, 66.67% {
+        transform: translateX(0);
+    }
+.17%, 37.5%,
+.5%, 70.83% {
+        transform: translateX(-5px);
+    }
+.33%, 66.67% {
+        transform: translateX(5px);
+    }
 }