So erreichen Sie eine Bildvergrößerung mit CSS

Mit der Popularität des Internets und mobiler Geräte sind Bilder in Webseiten und Apps zu einem unverzichtbaren Element geworden. Aber was sollen wir tun, wenn wir das Bild bis zu einem gewissen Grad vergrößern müssen? In diesem Artikel wird erläutert, wie Sie mithilfe von CSS den Vergrößerungseffekt von Bildern erzielen.

1. Grundkonzepte

Um den Vergrößerungseffekt von Bildern zu erzielen, müssen wir die folgenden zwei CSS-Eigenschaften verstehen:

1. Transformationseigenschaft: Wird zum Durchführen von Transformationsvorgängen wie Drehung, Skalierung und Bewegung von Elementen verwendet.
2. Übergangsattribut: Wird verwendet, um den Übergangseffekt eines Elements von einem Zustand in einen anderen zu definieren, z. B. Ein- und Ausblenden, Drehung usw. 2. Grundlegende Implementierung: Vergrößerungseffekt Die Schaltfläche ist „Vergrößern“ ( ). Als nächstes können wir den Bildvergrößerungseffekt über CSS erreichen:

    <img src="sample.jpg" class="pic" />
    <button onclick="enlarge()">Enlarge</button>

Im .pic-CSS-Stil definieren wir einen Übergangseffekt von 0,3 Sekunden, sodass beim Vergrößern des Bildes ein sanfter Übergang entsteht. In der .enlarge-Klasse verwenden wir das Transformationsattribut und setzen das Bildvergrößerungsverhältnis auf das 1,5-fache. Jetzt müssen wir nur noch die Funktion „enlarge()“ in JavaScript definieren und sie die .enlarge-Klasse zum Bild hinzufügen lassen, wenn auf die Schaltfläche geklickt wird:

    .pic {
        transition: all 0.3s;
    }

    .enlarge {
        transform: scale(1.5);
    }

Auf diese Weise wird das Bild vergrößert, wenn wir auf die Schaltfläche klicken. Wenn wir die Bildgröße wiederherstellen müssen, können wir in JavaScript eine Shrink()-Funktion definieren und diese die .enlarge-Klasse entfernen lassen:

    function enlarge() {
        document.querySelector('.pic').classList.add('enlarge');
    }

1. Vergrößerungs- und Verschiebungseffekte

Wenn wir das Bild vergrößern müssen, müssen wir dies auch tun Um einen Übersetzungsvorgang durchzuführen, wie sollte dieser implementiert werden? Zu diesem Zeitpunkt müssen wir die Funktion Translate () in der Transformation verwenden. Hier ist ein Beispielcode:

    function shrink() {
        document.querySelector('.pic').classList.remove('enlarge');
    }

In diesem Beispiel verwenden wir immer noch die Funktion „scale()“, um das Bild zu vergrößern, kombinieren sie aber gleichzeitig mit der Funktion „translate()“, um das Bild um 20 Pixel nach rechts unten zu verschieben. Mit dieser Methode können wir Bilder einfach vergrößern und verschieben.

3. Praktische Fälle

Zusätzlich zum grundlegenden Vergrößerungseffekt können wir auch andere CSS-Attribute kombinieren, um reichhaltigere Bildeffekte zu erzielen. Hier sind einige praktische Fälle:

2. Bildvergrößerungsmaske

In diesem Fall verwenden wir Pseudoelemente, um einen schwarzen Maskeneffekt zu erzielen, und platzieren dann das vergrößerte Bild unter der Maske, um den Effekt visuell darzustellen. Der Beispielcode lautet wie folgt:

    .move {
        transform: scale(1.5) translate(20px, 20px);
    }

    <div class="wrapper">
        <img src="sample.jpg" class="pic" />
        <div class="mask"></div>
    </div>

Im obigen Code verwenden wir Pseudoelemente, um Masken zu erstellen, und erzielen den Fade-Effekt der Maske über das Opazitätsattribut. Für die Bildvergrößerung verwenden Sie einfach das Transformationsattribut direkt in der Pseudoklasse :hover. Schließlich müssen wir den .wrapper auf „inline-block“ setzen, damit Bild und Maske korrekt ausgerichtet sind.

Miniaturansichten zur Bildvergrößerung

1. Auf einigen E-Commerce-Websites sehen wir häufig eine Reihe von Miniaturansichten, um auf eine neue Seite zu springen und die Vergrößerung der Bildversion anzuzeigen. Was ist, wenn wir eine vergrößerte Version der aktuellen Seite anzeigen möchten?

In diesem Fall können wir eine vergrößerte Version jedes Miniaturbilds hinzufügen und diese vergrößerten Versionen dann mithilfe von CSS an derselben Position platzieren, um den Vergrößerungseffekt zu erzielen. Der Beispielcode lautet wie folgt:

    .wrapper {
        position: relative;
        display: inline-block;
    }

    .pic {
        transition: all 0.3s;
        display: block;
    }

    .mask {
        position: absolute;
        top: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.5);
        width: 100%;
        height: 100%;
        z-index: 1;
        opacity: 0;
        transition: opacity 0.3s;
    }

    .wrapper:hover .mask {
        opacity: 1;
    }

    .wrapper:hover .pic {
        transform: scale(1.2);
    }

    <div class="wrapper">
        <img src="thumb1.jpg" class="thumbnail" data-large="large1.jpg" />
        <img src="thumb2.jpg" class="thumbnail" data-large="large2.jpg" />
        <img src="thumb3.jpg" class="thumbnail" data-large="large3.jpg" />
        <img src="thumb4.jpg" class="thumbnail" data-large="large4.jpg" />

        <div class="enlarge"></div>
    </div>

In diesem Beispiel fügen wir jedem Miniaturbild das Attribut „data-large“ hinzu, um die entsprechende vergrößerte Version zu speichern. Anschließend haben wir in HTML ein .enlarge-Element definiert, um das vergrößerte Bild anzuzeigen. In CSS setzen wir den Z-Index des .enlarge-Elements auf -1, sodass es unterhalb der Miniaturansicht platziert wird. Wenn wir schließlich mit der Maus über das Miniaturbild fahren, können wir die entsprechende vergrößerte Version an derselben Position platzieren, um den Vergrößerungseffekt zu erzielen.

4. Zusammenfassung

2. In diesem Artikel haben wir vorgestellt, wie man CSS verwendet, um den Bildvergrößerungseffekt zu erzielen. Unabhängig davon, ob es sich um eine grundlegende Vergrößerung und Bewegung oder um umfangreichere Fälle handelt, kann dies leicht durch die Transformations- und Übergangsattribute erreicht werden. Ich hoffe, dieser Artikel kann Ihnen helfen, bessere Ergebnisse bei der Webentwicklung zu erzielen.

Das obige ist der detaillierte Inhalt vonSo erreichen Sie eine Bildvergrößerung mit CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!