CSS zum Erzielen des Like-Card-Effekts in der unteren rechten Ecke der Webseite (Beispielcode)

Wirkung

Um HTML zu implementieren, bereiten Sie zunächst eine saubere HTML-Seite vor und schreiben Sie die Knoten:

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <title>Dokument</title>
    <link rel="styleSheet" type="text/css" href="./style.css" />
</Kopf>
<Text>
    
    <div>
        <Abschnitt Klasse="Karte">
            <div Klasse="Karte-oben">
                War diese Seite hilfreich?
            </div>
            <div Klasse="Karte-unten">
                <div Titel="👍">
                    JA
                </div>
                <div Titel="👎">
                    NEIN
                </div>
            </div>
        </Abschnitt>
    </div>
</body>
</html>

CSS

Erstellen Sie eine style.css im selben Verzeichnis, um unseren Stil zu schreiben:

Körper {
    Rand: 0;
    Polsterung: 0;
    /* Wechseln Sie auf Mobilgeräten zwischen horizontalen und vertikalen Bildschirmen*/
    -ms-text-size-adjust: 100 %;
    -Webkit-Textgrößenanpassung: 100 %;
    /* Rendering-Optimierung */
    -moz-osx-font-smoothing: Graustufen;
    -webkit-font-smoothing: Kantenglättung;
    Schriftgröße: 15px;
}

* {
    Box-Größe: Rahmenbox;
    Schriftfamilie: „Fira Code“, Hack, Consolas;
}

:Wurzel {
    --Farbe: #ff4081
}

Abschnitt {
    Rand: 0;
    Polsterung: 0;
}

.Karte {
    Schriftgröße: erben;
    Position: fest;
    rechts: 0;
    unten: 0;
    Hintergrundfarbe: var(--color);
    Rahmenradius: 4px 4px 0 0;
    Kastenschatten: 0 16px 60px 0 rgba (86, 91, 115, 0,2);
    Deckkraft: 0,5;
    transformieren: übersetzenX(-20px) übersetzen(103px, 27px) drehen(35 Grad);
    Übergang: alle 400 ms kubisch-bézier (0,26, 0,6, 0,4, 1,54);
}

.Karte:hover {
    Deckkraft: 1;
    transformieren: übersetzen(0, 0) drehen(0 Grad) übersetzenX(-20px);
}

.Karte-oben {
    Höhe: 50px;
    Zeilenhöhe: 50px;
    Polsterung: 0 1rem;
    Textausrichtung: zentriert;
    Benutzerauswahl: keine;
    Farbe: #fff;
}

.Kartenboden {
    Anzeige: Flex;
    Hintergrundfarbe: #fff;
    Inhalt ausrichten: gleichmäßiger Abstand;
}

.card-bottom div {
    Polsterung: 1rem;
    Cursor: Zeiger;
    Schriftstärke: 700;
    Texttransformation: Großbuchstaben;
    Textdekoration: keine;
    Farbe: var(--color);
    Übergang: alle 0,2 s linear;
}

.card-bottom div:hover {
    Textschatten: 0 1px 1px var(--color);
    Buchstabenabstand: 1px;
}

Zwei Animationen:

rotate(0deg) -> rotate(35deg)
translate(0px, 0px) -> translate(103px, 27px)

Animationsprozess: transform: translateX(-20px) translate(103px, 27px) rotate(35deg);

Beachten Sie, dass translateX(-20px) vor und nach der Animation konsistent ist und nur zwei Eigenschaften geändert werden.

Zusammenfassen

Dies ist das Ende dieses Artikels darüber, wie Sie mit CSS einen kleinen Karteneffekt in der unteren rechten Ecke einer Webseite erzeugen können (Beispielcode). Weitere verwandte CSS-Inhalte zum kleinen Karteneffekt in der unteren rechten Ecke einer Webseite finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

<<: So verhindern Sie, dass Flash HTML-Div-Elemente abdeckt

>>: Ist es einfach, mit Vue3 eine Popup-Komponente zu kapseln?

Element-Beispielcode zum Implementieren dynamischer Tabellen

CSS zum Erzielen des Like-Card-Effekts in der unteren rechten Ecke der Webseite (Beispielcode)

Element-Beispielcode zum Implementieren dynamischer Tabellen

Mehrere Situationen, in denen Div durch Iframe abgedeckt ist, und ihre Lösungen

Verwendung der MySQL-Anweisung „truncate table“

Das WeChat-Applet erkennt den Effekt des Wischens nach links zum Löschen von Listenelementen

MySql Group By implementiert die Gruppierung mehrerer Felder

So stellen Sie vom lokalen Windows-Remotedesktop eine Verbindung zum Alibaba Cloud Ubuntu 16.04-Server her

Detaillierte Erklärung des Mindestbreitenwerts von Inline-Blöcken in CSS

Löschen von Dateien mit Leerzeichen in Linux (keine Verzeichnisse)

Detaillierte Diskussion zum Thema mysqldump-Datenexport

So kompilieren Sie den Linux-Kernel

Artikel empfehlen

Beispielcode für die Django+MySQL-Konfiguration und einfache Bedienung der Datenbank

Detaillierte Erklärung, wo Docker Protokolldateien speichert

Details zum MySQL-Datentyp

Die endgültige Lösung für Chromes Mindestschriftgrößenbeschränkung von 12px

Detaillierte Erläuterung der MySQL-Datenbank mit zig Millionen Datenabfragen und -speicherungen

Javascript zum Wechseln von Bildern per Mausklick

So stellen Sie sicher, dass auf jeder Seite des WeChat Mini-Programms eine Anmeldung erfolgt

Lernen Sie 10 Möglichkeiten zum horizontalen und vertikalen Zentrieren in CSS kennen (Zusammenfassung)

Mysql SQL-Anweisungsvorgang zum Hinzufügen oder Ändern des Primärschlüssels

Beispiel für die Verwendung von HTML+CSS zur Implementierung einer sekundären Menüleiste beim Bewegen der Maus

Detaillierte Erläuterung des React setState-Datenaktualisierungsmechanismus

Warum erfordern Codestandards, dass SQL-Anweisungen nicht zu viele Verknüpfungen enthalten?

JS+CSS zur Realisierung einer dynamischen Uhr

Methoden und Schritte zum Bereitstellen von Go-Projekten basierend auf Docker-Images

Detaillierte Anweisungen zur Installation von MySQL8.0.19 im CentOS7.5-Tutorial