suchen

Heim  >  Artikel  >  Web-Frontend  >  Schwarzes Brett Realistische Illusion mit HTML-CSS und Javascript https://www.instagram.com/webstreet_code/

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

Mary-Kate Olsen
Mary-Kate OlsenOriginal
2024-11-21 02:53:10351Durchsuche

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>

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!

JavaScript css html for using display position margin padding border viewport background transform transition flex https
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Wie kann ich mit AJAX, PHP und jQuery erfolgreich mehrere Bilder hochladen?Nächster Artikel：Wie kann ich mit AJAX, PHP und jQuery erfolgreich mehrere Bilder hochladen?

In Verbindung stehende Artikel

Mehr sehen