WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
illusion de profondeur
843
byby.createsite
Ouvrir dans l'éditeur
Publiez votre code
Recommandé
15 May 2025
Un code par facontheo1
6 June 2025
Un code du texte
25 November 2025
Jeu Stick Merge - Code source du jeu HTML5
HTML
Copy
CSS
Copy
body { margin: 0; height: 100vh; display: flex; justify-content: center; align-items: center; background: #000; overflow: hidden; } /*cena com perspectiva */ .scene { position: relative; width: 100%; height: 100%; perspective: 1000px; perspective-origin: 50% 50%; } /*estilo comum dos paineis com posicao inicial no eixo z */ .panel { position: absolute; top: 50%; left: 50%; width: 350px; height: 100px; background: linear-gradient( to bottom, rgba(147, 112, 219, 0.6) 0%, rgba(106, 90, 205, 0.5) 50%, rgba(75, 0, 130, 0.4) 100% ); border: 2px solid rgba(147, 112, 219, 0.8); border-radius: 20px; transform: translate(-50%, -50%) translateZ(-1000px) rotateX(15deg); opacity: 0; animation: approach 4s cubic-bezier(0.25, 0.1, 0.25, 1) forwards; animation-delay: calc(var(--delay) * 1s); box-shadow: 0 15px 25px rgba(147, 112, 219, 0.15); background-blend-mode: overlay; } /*delay para cada painel */ .panel:nth-child(1) { --delay: 1; width: 350px; height: 100px; } .panel:nth-child(2) { --delay: 2; width: 300px; height: 85px; } .panel:nth-child(3) { --delay: 3; width: 250px; height: 70px; } .panel:nth-child(4) { --delay: 4; width: 200px; height: 55px; } /*animacao */ @keyframes approach { 0% { opacity: 0; transform: translate(-50%, -50%) translateZ(-1000px) rotateX(15deg); box-shadow: 0 15px 25px rgba(147, 112, 219, 0.15); } 50% { opacity: 0.7; transform: translate(-50%, -50%) translateZ(-500px) rotateX(7deg); box-shadow: 0 20px 30px rgba(147, 112, 219, 0.25); } 100% { opacity: 1; transform: translate(-50%, -50%) translateZ(calc(var(--z) * 1px)) rotateX(0deg); /* Posição final no eixo Z */ box-shadow: 0 25px 35px rgba(147, 112, 219, 0.3); /* Sombra final realista */ } } /*translateZ para cada 1 */ .panel:nth-child(1) { --z: 200; } .panel:nth-child(2) { --z: 100; } .panel:nth-child(3) { --z: 0; } .panel:nth-child(4) { --z: -100; }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */