Ouverture du parchemin

1,545 byby.createsite

Remixer Ouvrir dans l'éditeur Plein écran Discuter Publiez votre code

Recommandé

15 October 2026

Jeu de rythme funkin' du vendredi soir en HTML et JavaScript

21 May 2025

Page de destination du portefeuille

31 May 2026

Code HTML5 du jeu Escape Road

HTML

CSS

*{
            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;
            }
        }