1204
191
<! 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>
<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 symbolHeart. 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>
