WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
icono de carga 3
975
byby.createsite
Abrir en el editor
Video
Publica tu código
0
Recomendado
15 October 2025
Barra lateral de Glassmorphism HTML CSS Estilo Apple
11 April 2023
Formulario de contacto con CSS
12 April 2025
Un código de Farah
HTML
Copy
CSS
Copy
* { margin: 0; padding: 0; box-sizing: border-box; } body { background: black; width: 100vw; height: 100vh; display: flex; flex-direction: row; justify-content: center; align-items: center; font-family: 'Playfair Display', serif; overflow: hidden; } /*barra de carregamento */ .loading-container{ width:150px; height:300px; background-image: linear-gradient(#f5f5f5, #f5f5f5); background-repeat:no-repeat; background-size:100% 0%; rotate:180deg; border-radius:30px; margin-right:35px; box-shadow: 0 0 20px 5px rgba(128, 0, 128, 0.5); } /*fones de ouvido iguais aproveitando o display flex center */ .headphone1, .headphone-2{ display:flex; flex-direction:column; } /*animacao para o fone de ouvido inteiro 1 */ .headphone-1{ animation: comeFromTopAndFade 12s linear forwards; } @keyframes comeFromTopAndFade{ 0%{ transform: translateY(-300%); } 20%{ transform: translateY(0); } 95%{ transform: translateY(0); } 96%{ transform: translateX(0)rotateY(0); } 100%{ transform:translateX(-3000%) rotateY(180deg); } } /*animacao para o fone de ouvido 2 */ .headphone-2{ animation: comeFromBottomAndFade 12s linear forwards; } @keyframes comeFromBottomAndFade{ 0%{ transform: translateY(300%); } 20%{ transform: translateY(0); } 95%{ transform: translateY(0); } 96%{ transform: translateX(0)rotateY(0); } 100%{ transform:translateX(3970%) rotateY(180deg); } } /*animacao de carregamento com sincronia com os fones */ .loading-container{ opacity:1; animation: loadAndFade 12s linear forwards; } @keyframes loadAndFade{ 0%{background-size: 100% 0%;opacity:1;} 40%{background-size: 100% 100%;} 95%{opacity:1} 100%{background-size:100% 100%;opacity:0;} } /*cabo dos fones iguais aproveitando o flex */ .headphone-1 .base, .headphone-2 .base{ height: 100px; width:10px; background:#f5f5f5; border-radius:3px; display:flex; align-items:flex-end; box-shadow: 0 0 20px 5px rgba(128, 0, 128, 0.5); } /*marca preta no fim do cabo dos fones */ .headphone-1 .base::before, .headphone-2 .base::before{ content:''; width:10px; height:5px; margin-bottom:50%; background:rgb(0, 0, 0); } /*cabeca dos fones */ .headphone-1 .head, .headphone-2 .head{ width:45px; height:45px; background:#f5f5f5; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow: 0 0 20px 5px rgba(128, 0, 128, 0.5); } /*ajustando cabeca 1 por causa do flex */ .headphone-1 .head{ transform: translateX(-35px); } /*buraco na cabeca dos fones */ .headphone-1 .head::before, .headphone-2 .head::before{ content:''; background:rgb(0, 0, 0); border-radius:50%; width:5px; height:5px; } /*margens opostas para os furos */ .headphone-2 .head::before{ margin-left:50%; } .headphone-1 .head::before{ margin-right:50%; }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */