feat: Add HTML5 page with animated text transition effect

2024-10-06 23:18:30 +02:00
parent 6b36028436
commit fb9360023d
1 changed files with 35 additions and 0 deletions
--- a/animation.html
+++ b/animation.html
@@ -0,0 +1,35 @@
 <!DOCTYPE html>
 <html lang="de">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animation</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #000;
            color: #fff;
            font-family: 'Courier New', Courier, monospace;
            overflow: hidden;
        }
        .text {
            position: absolute;
            animation: moveText 5s infinite alternate;
            font-size: 2em;
            opacity: 0.8;
        }
        @keyframes moveText {
            0% { transform: translate(-50%, -50%); }
            50% { transform: translate(10%, 10%); }
            100% { transform: translate(50%, 50%); }
        }
    </style>
 </head>
 <body>
    <div class="text">The Next BIG Thing...</div>
    <div class="text" style="animation-delay: 2.5s;">...coming soon</div>
 </body>
 </html>