Wie vergrößere ich das Bild, indem ich die Maus in CSS3 bewege? (mit Code)-CSS-Tutorial-php.cn

Wie vergrößere ich das Bild, indem ich die Maus in CSS3 bewege? (mit Code)

不言

Freigeben： 2018-10-10 14:11:03

Original

13751 Leute haben es durchsucht

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="images/tu.jpg" alt="图片"/>
</div>      
</body>
</html>

Nach dem Login kopieren

css3 Der Vergleich vor und nach dem Platzieren der Maus auf dem Bild zum Vergrößern ist wie folgt:

Wie vergrößere ich das Bild, indem ich die Maus in CSS3 bewege? (mit Code) 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="images/tu.jpg" alt="图片"/>
</div>      
</body>
</html>

Nach dem Login kopieren

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!