WEBLEB
Startseite
Editor
Anmelden
Pro
Deutsch
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Flugzeugkofferraum
586
ByBy.inc
Im Editor öffnen
Veröffentlichen Sie Ihren Code
Empfohlen
10 May 2025
Ein Code von Mete
7 February 2025
Ein Code von bachir123
24 February 2025
CodePen Home-Drucktaste
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) */