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

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?

Artikel empfehlen

So implementieren Sie Property Hijacking mit JavaScript defineProperty

Inhaltsverzeichnis Vorwort Deskriptoren Detaillie...

Nginx implementiert ein Codebeispiel für die https-Websitekonfiguration

https-Basisport 443. Er wird für etwas verwendet,...

So lösen Sie das Problem, dass bei der Installation von VMware-Tools unter VMware die Installationsdatei nicht angezeigt wird

VMware-Tools bieten hohen Komfort bei der Verwend...

Verwenden Sie HTML+Css, um eine einfache Navigationsleistenfunktion zu implementieren (die Navigationsleiste ändert die Hintergrundfarbe, wenn die Maus darauf stößt).

Ⅰ. Problembeschreibung: Verwenden Sie HTML+CSS, u...

Detaillierte Erklärung der Verwendung des SS-Befehls in Linux in Kombination mit Zabbix zum Überwachen von Sockets

Inhaltsverzeichnis Vorwort 1. SS-Befehl 2. Gesamt...

Beispiel einer Nginx-Standortübereinstimmungsregel

1. Grammatik Standort [=|~|~*|^~|@] /uri/ { ... }...

Tutorial zur Installation von MySQL8 unter Linux CentOS7

1. Installation der RPM-Version Überprüfen Sie, o...

Fehlereinfügungsanalyse der Funktion „updatexml()“ von MySQL

Verstehen Sie zunächst die Funktion updatexml() U...

Implementierung der Docker-Bereitstellung von ElasticSearch und ElasticSearch-Head

In diesem Artikel wird hauptsächlich erläutert, w...

Index-Skip-Scan in MySQL 8.0

Vorwort MySQL 8.0.13 unterstützt nun den Index-Sk...

6 Lösungen für Netzwerkfehler im Docker-Container

6 Lösungen für Netzwerkfehler im Docker-Container...

Deaktivierte Werte, die nicht eingegeben werden können, können nicht an die Aktionsebene übergeben werden

Wenn ich das Formular eingabeunfähig machen möchte...

Fügen Sie beim Schreiben von HTML-Links immer Schrägstriche zu Unterordnern hinzu, um HTTP-Anfragen zu reduzieren

Denn wenn am Ende des Unterordners kein Schrägstri...

mysql löst das Problem, Datensätze zu finden, bei denen zwei oder mehr Felder NULL sind

Kerncode /*-------------------------------- Suche...

Das Prinzip und die grundlegende Verwendung von Vue.use() in Vue

Inhaltsverzeichnis Vorwort 1. Verstehen mit Beisp...