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?

Detaillierte Erläuterung der JS ES6-Codierungsstandards

Eine einfache Strategie zur ID-Generierung: Implementierung der Generierung einer global eindeutigen ID aus einer MySQL-Tabelle

Artikel

Zusammenfassung der Linux-Benutzergruppen und -Berechtigungen

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

Detaillierte Erläuterung der JS ES6-Codierungsstandards

So installieren Sie eine virtuelle Maschine mit Windows-Diensten auf dem Mac

So wählen und verwenden Sie PNG, JPG und GIF als Web-Bildformate

Implementierungscode zur Installation von vsftpd in Ubuntu 18.04

Eine einfache Strategie zur ID-Generierung: Implementierung der Generierung einer global eindeutigen ID aus einer MySQL-Tabelle

Zusammenfassung der Linux-Benutzergruppen und -Berechtigungen

Drei Verwendungszwecke und Unterschiede von MySQL sind nicht gleich

Aufbau der Angular-Umgebung und einfache Erfahrungszusammenfassung

Anwendungsbeispiele für React Hooks (6 gängige Hooks)

Javascript implementiert einfache Navigationsleiste

Artikel empfehlen

Tic-Tac-Toe-Spiel in reinem CSS3 implementiert

Kurze Analyse von CentOS 7 mysql-8.0.19-1.el7.x86_64.rpm-bundle.tar

Detaillierte Erläuterung der flexiblen Verwendung des CSS-Rastersystems in Projekten

MySQL lösen: FEHLER 1045 (28000): Zugriff verweigert für Benutzer ‚root‘@‚localhost‘ (mit Passwort: NEIN/JA)

Detailliertes Beispiel der Lesegeschwindigkeit von JS-Objekten

Implementierungsbeispiel zum Schließen der Browserabmeldung in Vue

So verwenden Sie border-image, um Beispielcode für Textblasenränder zu implementieren

Axios storniert Anfragen und vermeidet doppelte Anfragen

Implementierung der Remote-Linux-Entwicklung mit vscode

So verwenden Sie MySQL zur Abdeckung von Index- und Tabellenrückgabe

Prinzip und Anwendungsbeispiele des URL-Umschreibmechanismus von Nginx

Details zur Ereignisbindung reagieren

So konfigurieren Sie Nginx's Anti-Hotlinking

Vue implementiert bidirektionale Datenbindung

my.cnf-Parameterkonfiguration zur Optimierung der InnoDB-Engine-Leistung