Tableau d'affichage Illusion réaliste utilisant HTML CSS et Javascript https://www.instagram.com/webstreet

Tableau d'affichage Illusion réaliste utilisant HTML CSS et Javascript https://www.instagram.com/webstreet_code/

Mary-Kate Olsen

Libérer： 2024-11-21 02:53:10

original

383 Les gens l'ont consulté

Notice Board Realistic illusion using html css and javascript https://www.instagram.com/webstreet_code/

Suivez-nous sur Instagram : https://www.instagram.com/webstreet_code/

<!DOCTYPE html>
<html lang="fr">
<tête>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tableau d'affichage</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Shadows Into Light&display=swap');

        corps {
            affichage : flexible ;
            justifier-contenu : centre ;
            align-items : centre ;
            hauteur : 100vh ;
            famille de polices : « Arial », sans empattement ;
            marge : 0 ;
            couleur d'arrière-plan : #f0f0f0 ;
        }

        .tableau d'affichage {
            affichage : flexible ;
            flex-wrap : envelopper ;
            justifier-contenu : espace autour ;
            aligner les éléments : centre ;
            largeur : 80 % ;
            hauteur : 80vh ;
            écart : 20 px ;
            remplissage : 20 px ;
            couleur d'arrière-plan : #54290a ; /* Fond marron */
            bordure : 10px solide #6b3e1b ; /* Bordure marron plus foncée */
            rayon de bordure : 12 px ;
            box-shadow : 0 20px 35px rgba(0, 0, 0, 0.4);
        }

        .avis {
            largeur : 200 px ;
            hauteur : 170px ;
            couleur d'arrière-plan : #f5f5dc ;
            remplissage : 15 px ;
            position : relative ;
            box-shadow : 0 4px 10px rgba(0, 0, 0, 0.2);
            rayon de bordure : 10 px ;
            transition : facilité de transformation de 0,3 s, facilité d'ombre de boîte de 0,3 s ;
            font-family : « Shadows Into Light », cursive ;
            taille de police : 1.1rem ;
            couleur : #333 ;
            affichage : flexible ;
            aligner les éléments : centre ;
            justifier-contenu : centre ;
            alignement du texte : centre ;
            transformation : rotation (-5 deg ); /* Effet d'inclinaison initial */
        }

        .avis : survoler {
            transformation : traduireY(-8px) rotation(-3deg);
            box-shadow : 0 8px 20px rgba(0, 0, 0, 0.3);
        }

        .épingle {
            position : absolue ;
            haut : -8px ;
            gauche : 50 % ;
            transformer : traduireX(-50 %);
            largeur : 18px ;
            hauteur : 18px ;
            couleur de fond : rouge ;
            rayon de bordure : 50 % ;
            box-shadow : 0 4px 8px rgba(0, 0, 0, 0.3);
            indice z : 1 ;
        }

        /* Ajout d'inclinaisons et de couleurs d'arrière-plan uniques pour chaque avis */
        .avis:ntième-enfant(1) {
            couleur d'arrière-plan : #FFECB3 ; /* Jaune clair */
            transformation : rotation (-2deg);
        }

        .avis:ntième-enfant(2) {
            couleur d'arrière-plan : #C8E6C9 ; /* Vert clair */
            transformation : rotation (2 degrés );
        }

        .avis:ntième-enfant(3) {
            couleur d'arrière-plan : #FFCDD2 ; /* Rose clair */
            transformation : rotation (-4deg);
        }

        .avis:ntième-enfant(4) {
            couleur d'arrière-plan : #D1C4E9 ; /* Lavande */
            transformer : rotation (3 deg );
        }

    </style>
&Lt;/tête>
<corps>
    <div>

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!