Schwarzes Brett Realistische Illusion mit HTML-CSS und Javascript https://www.instagram.com/webstreet

Schwarzes Brett Realistische Illusion mit HTML-CSS und Javascript https://www.instagram.com/webstreet_code/

Mary-Kate Olsen

Freigeben： 2024-11-21 02:53:10

Original

383 Leute haben es durchsucht

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

Folgen Sie uns auf Instagram: https://www.instagram.com/webstreet_code/

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Schwarzes Brett</title>
    <Stil>
        @import url('https://fonts.googleapis.com/css2?family=Shadows Into Light&display=swap');

        Körper {
            Anzeige: Flex;
            rechtfertigen-Inhalt: Mitte;
            align-items: center;
            Höhe: 100 Vh;
            Schriftfamilie: „Arial“, serifenlos;
            Rand: 0;
            Hintergrundfarbe: #f0f0f0;
        }

        .Notice-Board {
            Anzeige: Flex;
            Flex-Wrap: wickeln;
            justify-content: space-around;
            align-items: center;
            Breite: 80 %;
            Höhe: 80vh;
            Lücke: 20px;
            Polsterung: 20px;
            Hintergrundfarbe: #54290a; /* Brauner Hintergrund */
            Rand: 10 Pixel durchgehend #6b3e1b; /* Dunkler brauner Rand */
            Randradius: 12px;
            Box-Shadow: 0 20px 35px rgba(0, 0, 0, 0,4);
        }

        .beachten {
            Breite: 200px;
            Höhe: 170px;
            Hintergrundfarbe: #f5f5dc;
            Polsterung: 15px;
            Position: relativ;
            Box-Shadow: 0 4px 10px rgba(0, 0, 0, 0,2);
            Randradius: 10px;
            Übergang: Transformation mit 0,3 Sekunden Leichtigkeit, Box-Shadow mit 0,3 Sekunden Leichtigkeit;
            Schriftfamilie: „Shadows Into Light“, kursiv;
            Schriftgröße: 1.1rem;
            Farbe: #333;
            Anzeige: Flex;
            align-items: center;
            rechtfertigen-Inhalt: Mitte;
            Textausrichtung: Mitte;
            transformieren: drehen(-5 Grad); /* Anfänglicher Skew-Effekt */
        }

        .notice:hover {
            transform: translatorY(-8px) rotate(-3deg);
            Box-Shadow: 0 8px 20px rgba(0, 0, 0, 0,3);
        }

        .pin {
            Position: absolut;
            oben: -8px;
            links: 50 %;
            transform: TranslateX(-50%);
            Breite: 18px;
            Höhe: 18px;
            Hintergrundfarbe: rot;
            Randradius: 50 %;
            Box-Shadow: 0 4px 8px rgba(0, 0, 0, 0,3);
            Z-Index: 1;
        }

        /* Hinzufügen einzigartiger Schräglagen und Hintergrundfarben für jeden Hinweis */
        .notice:nth-child(1) {
            Hintergrundfarbe: #FFECB3; /* Hellgelb */
            transformieren: rotieren(-2deg);
        }

        .notice:nth-child(2) {
            Hintergrundfarbe: #C8E6C9; /* Hellgrün */
            transformieren: rotieren(2deg);
        }

        .notice:nth-child(3) {
            Hintergrundfarbe: #FFCDD2; /* Hellrosa */
            transformieren: rotieren(-4deg);
        }

        .notice:nth-child(4) {
            Hintergrundfarbe: #D1C4E9; /* Lavendel */
            transformieren: drehen(3deg);
        }

    </style>
</head>
<Körper>
    <div>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonSchwarzes Brett Realistische Illusion mit HTML-CSS und Javascript https://www.instagram.com/webstreet_code/. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!