Scribd
Upload
3 views2 pages

!DOCTYPEhtml

This document is an HTML file that creates an interactive love-themed webpage. It features animated hearts and text that appear where the user clicks, displaying random phrases like 'I LOVE' and 'MI NIÑA'. The design includes a gradient background and styled text to enhance the visual experience.

Uploaded by

perrosolfa
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
3 views2 pages

!DOCTYPEhtml

This document is an HTML file that creates an interactive love-themed webpage. It features animated hearts and text that appear where the user clicks, displaying random phrases like 'I LOVE' and 'MI NIÑA'. The design includes a gradient background and styled text to enhance the visual experience.

Uploaded by

perrosolfa
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 2

<!

DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Pantalla Didáctica Amorosa</title>
<style>
body {
margin: 0;
overflow: hidden;
background: linear-gradient(to bottom, #000011, #1a0033);
font-family: 'Segoe UI', sans-serif;
touch-action: none;
}

.corazon, .texto {
position: absolute;
user-select: none;
pointer-events: none;
animation: flotar 1.5s ease-out forwards;
white-space: nowrap;
}

@keyframes flotar {
0% {
transform: scale(0.5) translateY(0);
opacity: 1;
}
100% {
transform: scale(1.5) translateY(-100px);
opacity: 0;
}
}

.central {
position: absolute;
top: 40%;
width: 100%;
text-align: center;
font-size: 3rem;
font-weight: bold;
color: #ff66cc;
text-shadow: 0 0 10px #ff99cc, 0 0 20px #ff33cc;
z-index: 100;
}
</style>
</head>
<body>

<div class="central">Mi niña 💖</div>

<script>
const frases = ['❤', '💖', 'I LOVE', 'MI NIÑA'];

document.addEventListener("pointerdown", (e) => {


const el = document.createElement('div');
el.className = Math.random() > 0.5 ? 'corazon' : 'texto';
el.textContent = frases[Math.floor(Math.random() * frases.length)];
el.style.left = e.clientX + 'px';
el.style.top = e.clientY + 'px';
el.style.color = ['#ff66cc', '#ff3399', '#ff4d4d'][Math.floor(Math.ran-
dom() * 3)];
el.style.fontSize = (Math.random() * 20 + 20) + 'px';
document.body.appendChild(el);

setTimeout(() => {
el.remove();
}, 1500);
});
</script>

</body>
</html>

You might also like