PixelForge
HTML/CSS → PNG · MP4
16:9
1:1
9:16
4:5
Dur
s
|
FPS
15
24
30
60
PNG
Exportar Video
index.html
5 lines
<div class="card"> <h1>Hola, mundo</h1> <p>Convierte tu HTML/CSS en imágenes y videos.</p> <span class="dot"></span> </div>
styles.css
40 lines
body { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #0ea5e9, #a855f7); font-family: system-ui, sans-serif; } .card { background: white; padding: 64px 80px; border-radius: 24px; box-shadow: 0 30px 80px rgba(0,0,0,0.25); text-align: center; position: relative; animation: float 2.4s ease-in-out infinite; } h1 { margin: 0 0 12px; font-size: 56px; background: linear-gradient(90deg, #0ea5e9, #a855f7); -webkit-background-clip: text; background-clip: text; color: transparent; } p { margin: 0; color: #475569; font-size: 20px; } .dot { position: absolute; top: 18px; right: 18px; width: 14px; height: 14px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 0 rgba(34,197,94,0.6); animation: pulse 1.6s ease-out infinite; } @keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,0.6); } 100% { box-shadow: 0 0 0 24px rgba(34,197,94,0); } }
Preview · 1920×1080
40% scale