<! DOCTYPE html> <html lang= "en" > <head> <meta charset= "UTF-8" > <meta name= "viewport" content= "width=device-width, initial-scale=1.0" > <title>My Baby Love You</title> <style> Body { Background-color: Rgb (192, 1, 33) ; Margin: 0; Padding: 0; Display: Flex; Flex-direction: Column; Justify-content: Center; Align-items: Center; Height: 100vh; Overflow: Hidden; } Text { Font-size: 4em; Font-weight: Bold; Padding-bottom: 50px; Color: Rgb (245, 238, 238) ; Text-align: Center; /* Removed animation: Grow */ Animation: Appear 5s ease-in-out; /* Keep only the appear animation */ } @keyframes appear { 0% { Opacity: 0; } 100% { Opacity: 1; } } Heart { Position: Absolute; Font-size: 50px; Color: White; Animation: Float 5s linear infinite; } @keyframes float { 0% { Transform: Translate (-50%, -50%) rotate (0deg) ; } 100% { Transform: Translate (150%, 150%) rotate (360deg) ; } } </style> </head> <body> <div class= "text" >My baby love you so much forever you and I</div> <div> </div> <div class= "text" >I love you oh! I love you so much forever you and I</div> <script> // Generate and add hearts to the page Function createHeart () { Const heart = document. CreateElement ('div') ; Heart. ClassList. Add ('heart') ; Heart. TextContent = '❤️'; // Unicode heart symbol Heart. Style. Left = `${Math. Random () * 100}vw`; Heart. Style. Top = `${Math. Random () * 100}vh`; Document. Body. AppendChild (heart) ; // Remove the heart after 5 seconds SetTimeout(() => { Heart. Remove () ; }, 5000) ; } // Create a new heart every 300 milliseconds SetInterval (createHeart, 300) ; // Animate the text Const textElements = document. QuerySelectorAll ('. Text') ; TextElements. ForEach((textElement, index) => { Const text = textElement. TextContent; TextElement. TextContent = '; Let i = 0; Function animateText () { If (i < text. Length) { TextElement. TextContent += text; I++; SetTimeout (animateText, 100) ; // Decrease the delay to 100 milliseconds } } AnimateText () ; }) ; </script> </body> </html>
