Web-Frontend
CSS-Tutorial
Wie vergrößere ich das Bild, indem ich die Maus in CSS3 bewege? (mit Code)
Wie vergrößere ich das Bild, indem ich die Maus in CSS3 bewege? (mit Code)
Beim Studium von CSS3 werden wir oft einige kleine Animationseffekte erstellen, was sehr interessant ist. Daher wird Ihnen der heutige Artikel einen Effekt von CSS3 vorstellen, um eine Bildverstärkung zu erreichen. Interessierte Freunde können einen Blick darauf werfen.
Wir alle wissen, dass CSS3 ein Transformationsattribut hinzufügt, das für die 2D- oder 3D-Transformation von Elementen gilt. Das Transformationsattribut ermöglicht es uns, Elemente zu drehen, zu skalieren, zu verschieben oder zu neigen. Daher ist das Transformationsattribut erforderlich, um eine Bildvergrößerung in CSS3 zu erreichen. Schauen wir uns die Auswirkung der Verwendung des Transformationsattributs in CSS3 an, um eine Bildvergrößerung zu erreichen.
Der erste Typ: CSS3 realisiert den Effekt, dass das Bild vergrößert wird und der überschüssige Teil nicht ausgeblendet wird, wenn wir die Maus über das Bild bewegen:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.enlarge{
width: 300px;
height: 300px;
border: 1px #ffffff solid;
}
.enlarge img{
width: 100%;
height: 100%;
cursor: pointer;
transition: all 0.6s;
-ms-transition: all 0.8s;
}
.enlarge img:hover{
transform: scale(1.2);
-ms-transform: scale(1.2);
}
</style>
</head>
<body>
<div class="enlarge">
<img src="/static/imghw/default1.png" data-src="images/tu.jpg" class="lazy" alt="图片"/>
</div>
</body>
</html>css3 Der Vergleich vor und nach dem Platzieren der Maus auf dem Bild zum Vergrößern ist wie folgt:
Der Effekt der Vergrößerung des Bildes und des Versteckens des dahinter liegenden Teils it: 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.enlarge{
width: 300px;
height: 300px;
overflow: hidden;
border: 1px #ffffff solid;
}
.enlarge img{
width: 100%;
height: 100%;
cursor: pointer;
transition: all 0.6s;
-ms-transition: all 0.8s;
}
.enlarge img:hover{
transform: scale(1.3);
-ms-transform: scale(1.3);
}
</style>
</head>
<body>
<div class="enlarge">
<img src="/static/imghw/default1.png" data-src="images/tu.jpg" class="lazy" alt="图片"/>
</div>
</body>
</html>Der Vorher- und Nachhereffekt der Verwendung von CSS3 zum Vergrößern des Bildes durch Platzieren der Maus ist wie folgt: .
Erklärung: Für die beiden oben genannten Situationen zum Vergrößern von Bildern mit CSS3 wird die Pseudoklasse :hover verwendet, die den Zustand darstellt, in dem die Maus schwebt Wird das Bild vergrößern, und wenn die Maus entfernt wird, kehrt das Bild in seine ursprüngliche Größe zurück.Das Obige ist der gesamte Inhalt dieses Artikels. Weitere Informationen zur Verwendung des Transformationsattributs in CSS3 finden Sie im CSS3-Studienhandbuch
.Das obige ist der detaillierte Inhalt vonWie vergrößere ich das Bild, indem ich die Maus in CSS3 bewege? (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1374
52
Wie erzielt man mit reinem CSS3 einen Welleneffekt? (Codebeispiel)
Jun 28, 2022 pm 01:39 PM
Wie erzielt man mit reinem CSS3 einen Welleneffekt? In diesem Artikel erfahren Sie, wie Sie mit SVG- und CSS-Animationen Welleneffekte erstellen.
Verwenden Sie CSS geschickt, um verschiedene seltsam geformte Schaltflächen zu realisieren (mit Code).
Jul 19, 2022 am 11:28 AM
Dieser Artikel zeigt Ihnen, wie Sie mithilfe von CSS auf einfache Weise verschiedene seltsam geformte Schaltflächen realisieren können, die häufig vorkommen. Ich hoffe, dass er Ihnen hilfreich sein wird!
So verstecken Sie Elemente in CSS, ohne Platz zu beanspruchen
Jun 01, 2022 pm 07:15 PM
Zwei Methoden: 1. Fügen Sie mit dem Anzeigeattribut einfach den Stil „display:none;“ zum Element hinzu. 2. Verwenden Sie die Attribute „position“ und „top“, um die absolute Positionierung des Elements festzulegen, um das Element auszublenden. Fügen Sie dem Element einfach den Stil „position:absolute;top:-9999px;“ hinzu.
So implementieren Sie Spitzenränder in CSS3
Sep 16, 2022 pm 07:11 PM
In CSS können Sie das Attribut „border-image“ verwenden, um einen Spitzenrand zu erzielen. Das Attribut „border-image“ kann Bilder zum Erstellen von Rändern verwenden, d. h. zum Hinzufügen eines Hintergrundbilds zum Rand. Sie müssen lediglich das Hintergrundbild als Spitzenstil angeben Bildrandbreite nach innen. Ob der Anfang wiederholt wird;".
Es zeigt sich, dass Textkarussell und Bildkarussell auch mit reinem CSS realisierbar sind!
Jun 10, 2022 pm 01:00 PM
Wie erstelle ich ein Textkarussell und ein Bildkarussell? Das erste, woran jeder denkt, ist die Verwendung von js. Tatsächlich können Textkarussell und Bildkarussell auch einen Blick auf die Implementierungsmethode werfen.
So vergrößern Sie das Bild durch Klicken mit der Maus in CSS3
Apr 25, 2022 pm 04:52 PM
Implementierungsmethode: 1. Verwenden Sie den Selektor „:active“, um den Status des Mausklicks auf das Bild auszuwählen. 2. Verwenden Sie das Transformationsattribut und die Funktion „scale()“, um den Bildvergrößerungseffekt zu erzielen. Die Syntax „img:active {transform : Skala(x-Achsen-Vergrößerung, y-Achsen-Vergrößerung);}".
Wie implementiert man mit JavaScript einen Mouseover-Vergrößerungseffekt auf Bildern?
Oct 20, 2023 am 09:16 AM
Wie implementiert man mit JavaScript einen Mouseover-Vergrößerungseffekt auf Bildern? Das heutige Webdesign legt immer mehr Wert auf die Benutzererfahrung und viele Webseiten fügen Bildern einige Spezialeffekte hinzu. Unter diesen ist der Bild-Mouse-Over-Vergrößerungseffekt ein häufiger Spezialeffekt, der das Bild automatisch vergrößern kann, wenn der Benutzer mit der Maus darüber fährt, wodurch die Interaktion zwischen dem Benutzer und dem Bild erhöht wird. In diesem Artikel wird erläutert, wie Sie mit JavaScript diesen Effekt erzielen, und es werden konkrete Codebeispiele aufgeführt. Ideenanalyse: Um den Mouseover-Vergrößerungseffekt von Bildern zu erzielen, können wir JavaS verwenden
Wie verwende ich Vue, um Bildlauf- und Zoomanimationen zu implementieren?
Aug 18, 2023 am 08:13 AM
Wie verwende ich Vue, um Bildlauf- und Zoomanimationen zu implementieren? Vue.js ist ein beliebtes JavaScript-Framework, das zahlreiche Funktionen und Komponenten bietet, die es Entwicklern ermöglichen, auf einfache Weise interaktive und dynamische Webanwendungen zu erstellen. Eines der häufigsten Anwendungsszenarien ist die Implementierung von Bildlauf- und Zoomanimationen. In diesem Artikel erfahren Sie, wie Sie mit Vue.js solche Funktionen implementieren und stellen entsprechende Codebeispiele bereit. Zuerst müssen wir eine Datenliste mit mehreren Bildern vorbereiten. Wir können die UR des Bildes ändern
