update

2024-11-25 17:43:44 +07:00
commit 95dede4f52
2 changed files with 278 additions and 0 deletions
--- a/demo.html
+++ b/demo.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <style>
+        @keyframes typewriter {
+            0% {
+                width: 0;
+            }
+
+            100% {
+                width: 100%;
+            }
+        }
+
+        .animate-typewriter {
+            display: inline-block;
+            overflow: hidden;
+            white-space: nowrap;
+            border-right: 3px solid #fff;
+            /* Để tạo hiệu ứng gạch đứng như con trỏ gõ chữ */
+            animation: typewriter 4s steps(30) 1s 1 normal both, blink 0.75s step-end infinite;
+        }
+
+        @keyframes blink {
+            50% {
+                border-color: transparent;
+            }
+        }
+
+
+        /* Định nghĩa animation cho hiệu ứng slide từ dưới lên */
+        .carousel-wrapper {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            overflow: hidden;
+            height: 60px;
+            margin: 100px 0;
+            /* Điều chỉnh chiều cao của carousel */
+        }
+
+        .carousel {
+            display: flex;
+            flex-direction: row;
+            gap: 20px;
+            animation: slideUp 2s ease-in-out infinite;
+        }
+
+        @keyframes slideUp {
+            0% {
+                transform: translateY(100%);
+                opacity: 0;
+            }
+
+            25% {
+                transform: translateY(0);
+                opacity: 1;
+            }
+
+            50% {
+                transform: translateY(0);
+                opacity: 1;
+            }
+
+            75% {
+                transform: translateY(-100%);
+                opacity: 0.5;
+            }
+
+            100% {
+                transform: translateY(-100%);
+                opacity: 0;
+            }
+        }
+
+        .carousel img {
+            width: 120px;
+            height: 60px;
+            object-fit: contain;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="container">
+        <div class="flex justify-center items-center h-screen bg-gray-800">
+            <div class="relative">
+                <h1 class="text-2xl font-bold text-white animate-typewriter">Build appsFiona and websitesDevin
+                    together</h1>
+            </div>
+        </div>
+    </div>
+
+</body>
+
+</html>