WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Ouverture du parchemin
564
ByBy.inc
Ouvrir dans l'éditeur
Publiez votre code
Recommandé
30 August 2024
Effet de parallaxe du curseur
15 May 2025
DJ d'introduction
2 August 2025
piège du tutoriel
HTML
Copy
abrindo pegaminho
CSS
Copy
*{ margin: 0; padding: 0; } body{ background-color: black; width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; box-sizing: border-box; } /*papel aberto com tamanho de background inicial 0 de altura e 90% da largura por causa da perspectiva */ .container{ background-image: linear-gradient(white,gray); width: 30px; height: 60px; transform: perspective(150px) rotateY(-30deg); transform-style: preserve-3d; transform-origin: left; background-size: 90% 12px; background-repeat: no-repeat; background-position: 100% center; } /*rolo superior posicionado no topo do centro */ .upper{ position: absolute; top: 30%; background: rgb(255, 255, 255); width: 30px; height: 10px; display: flex; align-items: center; box-sizing: border-box; border-radius: 10px; } /*esfera do rolo superior */ .upper::before{ position: absolute; left: 70%; content: ''; background: black; width: 8px; height: 8px; border-radius: 50%; border:solid 0.5px white; } /*rolo inferior posicionado no botão do meio */ .lower{ margin-top: 6%; background: rgb(255, 255, 255); width: 30px; height: 10px; display: flex; align-items: center; position: absolute; top: 50%; box-sizing: border-box; border-radius: 10px; } /* esfera do rolo inferior */ .lower::before{ position: absolute; left: 70%; content: ''; background: black; width: 8px; height: 8px; border-radius: 50%; border:solid 0.5px white; } /* animacao do rolos superior e inferior sincronizadas manualmente com a abertuda do background ao passar o mouse sobre o container*/ .container:hover .upper{ animation: effectupperANDsync 1s linear forwards; } .container:hover .lower{ animation: effectlowerANDsync 1s linear forwards; } /*texto dentro sincronizado com o final */ .container:hover .textInside{ animation: syncText 1s linear forwards; } /*abertura do papel */ .container:hover{ animation: perspectiveANDbackground 0.75s linear forwards; } /*animacoes para sincronizar e sumir por causa da perspectiva, bem como diminuir a altura para fazer um efeito que está consumindo o papel(pode ser ajustada) */ @keyframes effectlowerANDsync{ 0%{ transform: translateY(0) scaleY(1); opacity: 1; } 29%{ opacity: 1; } 30%{ opacity: 0; } 100%{ transform: translateY(27px) scaleY(0.1); opacity: 0; } } @keyframes effectupperANDsync{ 0%{ transform: translateY(0) scaleY(1); opacity: 1; } 29%{ opacity: 1; } 30%{ opacity: 0; } 100%{ transform: translateY(-27px) scaleY(0.1); opacity: 0; } } /*mudando a perspectiva do papel, elevando para cim e tambem aumentando o tamanho, ao mesmo tempo que o papel abre */ @keyframes perspectiveANDbackground{ 0%{ transform: translateY(0) perspective(150px) rotateY(-30deg) scale(1); background-size: 90% 10px; } 100%{ transform: translateY(-30px) perspective(15000px) rotateY(30deg) scale(1.5); background-size: 100% 100%; } } /*texto dentro */ .textInside{ opacity: 0; font-size: 4pt; font-family: monospace; text-align: center; word-wrap: break-word; max-width: 100%; } @keyframes syncText{ 0%{ opacity: 0; } 99%{ opacity: 0; } 100%{ opacity: 1; } }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */