Comment agrandir l'image en plaçant la souris en css3 ? (avec code)-tutoriel CSS-php.cn

Comment agrandir l'image en plaçant la souris en css3 ? (avec code)

不言

Libérer： 2018-10-10 14:11:03

original

13719 Les gens l'ont consulté

Dans l'étude de CSS3, nous ferons souvent quelques petits effets d'animation, ce qui est très intéressant, donc l'article d'aujourd'hui vous présentera un effet de CSS3 pour réaliser une amplification d'image. Les amis intéressés peuvent y jeter un œil.

Nous savons tous que CSS3 ajoute un attribut de transformation qui s'applique à la transformation 2D ou 3D des éléments. L'attribut transform nous permet de faire pivoter, mettre à l'échelle, déplacer ou incliner des éléments. Par conséquent, l'attribut transform est nécessaire pour réaliser l'agrandissement de l'image en CSS3. Examinons l'effet de l'utilisation de l'attribut transform en CSS3 pour réaliser l'agrandissement de l'image.

Le premier type : css3 réalise l'effet que lorsque l'on met la souris sur l'image, l'image est agrandie et la partie excédentaire n'est pas cachée :

<!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>

Copier après la connexion

La comparaison avant et après du CSS3 réalisant l'effet de placer la souris sur l'image pour agrandir l'image est la suivante :

Comment agrandir limage en plaçant la souris en css3 ? (avec code) L'effet de l'agrandissement de l'image sur l'image et en masquant la partie au-delà :

L'effet avant et après de l'utilisation de CSS3 pour agrandir l'image en plaçant la souris sur l'image est le suivant :

<!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>

Copier après la connexion

Explication : Pour les deux situations d'amplification d'image CSS3 ci-dessus, la pseudo-classe :hover est utilisée, qui représente l'état lorsque la souris survole, de sorte que lorsque nous plaçons la souris sur l'image. Lorsque l'on clique sur la souris, l'image sera agrandie. Lorsque la souris est retirée, l'image reviendra à sa taille d'origine. Comment agrandir limage en plaçant la souris en css3 ? (avec code) Ce qui précède représente l'intégralité du contenu de cet article. Pour une utilisation plus détaillée de l'attribut transform en CSS3, vous pouvez vous référer au