Ouverture du parchemin

1,412 byby.createsite

Ouvrir dans l'éditeur Publiez votre code

Recommandé

15 January 2026

Code source HTML5 du jeu Iron Snout

16 April 2026

Code source HTML5 du jeu Level Devil

18 November 2025

Un code du texte

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