WEBLEB
Home
AI Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
CSS Tabs Example: Simple HTML Layout
936
byby.createsite
Open In Editor
Video
Publish Your Code
0
Recommended
30 November 2025
HTML Login Form (French)
26 March 2025
Multi Step Form with Progress Bar using jQuery and CSS3
24 November 2025
Basket Random Game HTML5 Source Code
HTML
Copy
CSS
Copy
* { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: #181818; display: flex; align-items: center; justify-content: center; height: 100vh; overflow: hidden; } .codigo { position: absolute; top: 0; left: 50%; transform: translateX(-50%); background: #272822; color: #F8F8F2; font-family: 'Consolas', 'Monaco', monospace; font-size: 18px; padding: 20px; border-radius: 8px; white-space: pre-line; text-align: left; line-height: 1.6; max-height: 50%; width: 100%; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } .selector { color: #F92672; } .property { color: #66D9EF; } .value-number { color: #AE81FF; } .value-string { color: #E6DB74; } .value-color { color: #A6E22E; } .brace { color: #F8F8F2; } .comment { color: #75715E; } .function { color: #A6E22E; } .animation-container { position: absolute; width: 100%; height: 100%; display: flex; overflow: hidden; } .tab { position: absolute; width: 200px; height: 80px; background-color: #fff; border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); transform-origin: top right; /* Define ponto de rotação para transformações */ /* Transformação de escala e rotação para criar um efeito de zoom e "overflow" */ animation: tabChaos 10s linear infinite; /* Chamando a animação "tabChaos" com duração de 10 segundos, de acordo com a duração da própria animação e duração infinita */ } /* Animação "tabChaos", aplicando variação de escala, rotação e translção para cada tab */ @keyframes tabChaos { 0% { transform: scale(1) rotate(0deg); opacity: 1; } 25% { transform: scale(0.8) rotate(15deg); opacity: 0.8; } 50% { transform: scale(1.2) rotate(-20deg); opacity: 0.5; top: 20px; /* Movimento vertical */ } 75% { transform: scale(0.9) rotate(10deg); opacity: 0.6; } 100% { transform: scale(1) rotate(0deg); opacity: 1; } }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */