WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
HTML
CSS
JS
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <title>Corazón de Código</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <div class="heart-container" id="heart"></div> </div> <script src="script.js"></script> </body> </html>
body { background-color: black; margin: 0; height: 100vh; display: flex; justify-content: center; align-items: center; overflow: hidden; } .heart-container { position: relative; width: 500px; height: 500px; /* Esto permite que los elementos internos se muevan en 3D si quieres */ transform-style: preserve-3d; animation: appear 4s infinite alternate; } span { position: absolute; color: #ff69b4; /* Rosa */ font-family: Arial, sans-serif; font-size: 12px; text-shadow: 0 0 10px #ff69b4, 0 0 20px #ff69b4; white-space: nowrap; } @keyframes appear { 0% { transform: scale(0.8); opacity: 0.5; } 100% { transform: scale(1.1); opacity: 1; } }
/* Replace with your JS Code (Leave empty if not needed) */
Preview
Open Advanced Editor
Publish Code
Full Screen
HTML
CSS
JS
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <title>Corazón de Código</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <div class="heart-container" id="heart"></div> </div> <script src="script.js"></script> </body> </html>
body { background-color: black; margin: 0; height: 100vh; display: flex; justify-content: center; align-items: center; overflow: hidden; } .heart-container { position: relative; width: 500px; height: 500px; /* Esto permite que los elementos internos se muevan en 3D si quieres */ transform-style: preserve-3d; animation: appear 4s infinite alternate; } span { position: absolute; color: #ff69b4; /* Rosa */ font-family: Arial, sans-serif; font-size: 12px; text-shadow: 0 0 10px #ff69b4, 0 0 20px #ff69b4; white-space: nowrap; } @keyframes appear { 0% { transform: scale(0.8); opacity: 0.5; } 100% { transform: scale(1.1); opacity: 1; } }
/* Replace with your JS Code (Leave empty if not needed) */
Preview
Validating your code, please wait...