WEBLEB
Home
Editor
Accedi
Pro
Italiano
English
Français
Español
Português
Deutsch
Italiano
हिंदी
baule dell'aereo
583
ByBy.inc
Apri nell'Editor
Pubblica il Tuo Codice
Consigliato
13 June 2025
caricamento della tostatura delle uova
16 October 2025
Animazione di caricamento CSS con effetti frammento
9 September 2023
HTML
Copy
abrir tampa
CSS
Copy
* { margin: 0; padding: 0; } body{ background: rgb(0, 0, 0); width: 100vw; height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; font-family: monospace; } /*elipse 1 da tampa e container com cor de fundo igual ao background */ .container::before,.tampa::before{ content: ''; background: rgb(0, 0, 0); width: 250px; position: absolute; left: -160px; top: -32px; height: 130px; clip-path: ellipse(25% 40% at 50% 50%); } /*elipse 2 da tampa e container com cor de fundo igual ao background*/ .container::after,.tampa::after{ content: ''; position: absolute; left: 160px; top: -32px; background: rgb(0, 0, 0); width: 250px; height: 130px; clip-path: ellipse(25% 40% at 50% 50%); } /* container e tampa (retangulos)*/ .container,.tampa{ position: absolute; background: rgba(255, 255, 255); width: 250px; height: 65px; display: flex; flex-direction: column; align-items: center; justify-content: center; } /* tampa na frente com z-index */ .tampa{ z-index: 2; } /* animacao ao passar mouse na tampa */ .tampa:hover{ animation: abrirTampa 1.5s linear forwards; transform-origin: top; } /* animacao rotate para abrir */ @keyframes abrirTampa{ 0%{ transform: rotateX(0); } 100%{ transform: rotateX(-135deg); } }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */