Comment créer un effet d'agrandissement d'image sympa en utilisant du CSS3 pur ?-tutoriel CSS-php.cn

Comment créer un effet d'agrandissement d'image sympa en utilisant du CSS3 pur ?

青灯夜游

Libérer： 2021-08-24 09:36:46

original

1958 Les gens l'ont consulté

Dans l'article "Utilisez CSS3 pour créer une image d'arrière-plan triangulaire sympa", nous avons présenté la méthode d'utilisation de CSS3 pour créer une image d'arrière-plan triangulaire sympa afin de donner à la page Web un aspect haut de gamme ! Cette fois, nous parlerons de la façon d'utiliser du CSS3 pur pour obtenir l'effet d'agrandissement de l'image au survol de la souris. Les amis intéressés peuvent en savoir plus ~

L'effet d'agrandissement de l'image au survol de la souris est un effet spécial très utile et accrocheur qui peut être utilisé. ajouter de l'interactivité aux pages Web Lorsque l'utilisateur passe la souris sur l'image, l'image sera légèrement agrandie. Adapté aux pages d’affichage d’images, il peut grandement améliorer l’expérience utilisateur !

Commençons directement par le code :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.img-wrapper {
  width: 220px;
  height: 220px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

.img-wrapper img {
  height: 220px;
  -webkit-transition: 0.3s linear;
  transition: 0.3s linear;
}

.img-wrapper img:hover {
  transform: scale(1.1);
}

.img-wrapper {
  display: inline-block;
  box-sizing: border-box;
  border: 3px solid #000;
}
/* ============== 
* 灰度滤镜
* ==============*/
.grayscale-img {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

.grayscale-img:hover {
  -webkit-filter: grayscale(0);
  filter: grayscale(0);
}

/* ============== 
* 深褐色滤镜
* ==============*/
.sepia-img {
  -webkit-filter: sepia(100%);
  filter: sepia(100%);
}

.sepia-img:hover {
  -webkit-filter: sepia(0);
  filter: sepia(0);
}


</style>
</head>
<body>
<div class="img-wrapper">
  <img  src="demo/img/1.jpg"/ alt="Comment créer un effet d'agrandissement d'image sympa en utilisant du CSS3 pur ?" >
</div>
<!-- 灰度滤镜 -->
<div class="img-wrapper">
  <img  class="grayscale-img" src="demo/img/1.jpg"/ alt="Comment créer un effet d'agrandissement d'image sympa en utilisant du CSS3 pur ?" >
</div>

<!-- 深褐色滤镜 -->
<div class="img-wrapper">
  <img class="sepia-img" src="demo/img/1.jpg"
  />
</div>

</body>
</script>
</body>
</html>

Copier après la connexion

L'effet est le suivant :

Comment créer un effet dagrandissement dimage sympa en utilisant du CSS3 pur ?

OK, analysons le code ci-dessus :

Créez d'abord un div pour envelopper la balise img La fonction du conteneur div. est : Bloquez l'image afin que lorsque l'image est agrandie, l'image ne dépasse pas la largeur et la hauteur spécifiées par nos soins. Si vous voulez que div réalise cette fonction, vous avez besoin d'un style de clé overflow: caché de cette manière, lorsque l'image est agrandie, la partie excédentaire sera masquée. overflow: hidden；这样当图片放大时，超出部分会被隐藏。

<div class="img-wrapper">
  <img  src="demo/img/1.jpg"/ alt="Comment créer un effet d'agrandissement d'image sympa en utilisant du CSS3 pur ?" >
</div>

.img-wrapper {
  width: 220px;
  height: 220px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

Copier après la connexion

然后就是实现图片放大效果了，我这里使用的是transform: scale(1,1)样式。transform属性可以向元素应用 2D 或 3D 转换，而scale是用于放大（整数就会放大）或者缩小（负数就会缩小）元素的。

.img-wrapper img {
  height: 220px;
}
.img-wrapper img:hover {
  transform: scale(1.1);
}

Copier après la connexion

Comment créer un effet dagrandissement dimage sympa en utilisant du CSS3 pur ?

这样实现的图片放大效果是突兀的，鼠标悬停就突然放大了，可以使用transition属性添加一个过渡效果，因为该属性是css3的一个新属性，要添加前缀来兼容其他浏览器

.img-wrapper img {
  height: 220px;
  -webkit-transition: 0.3s linear;  /* 兼容谷歌浏览器 */
  transition: 0.3s linear;
}

Copier après la connexion

Comment créer un effet dagrandissement dimage sympa en utilisant du CSS3 pur ?

这样就实现鼠标悬停图片放大效果了。但是这样的放大效果有点单调，我们可以给图片设置滤镜属性filter，来让图片放大效果更炫酷！

我们可以先让图片变灰（filter: grayscale(100%)）或者变深褐色（filter: sepia(100%)

<!-- 灰度滤镜 -->
<div class="img-wrapper">
  <img class="grayscale-img" src="demo/img/1.jpg"
  />
</div>

.grayscale-img {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

.grayscale-img:hover {
  -webkit-filter: grayscale(0);
  filter: grayscale(0);
}



<!-- 深褐色滤镜 -->
<div class="img-wrapper">
  <img
    class="sepia-img"
    src="demo/img/1.jpg"
  />
</div>

.sepia-img {
  -webkit-filter: sepia(100%);
  filter: sepia(100%);
}

.sepia-img:hover {
  -webkit-filter: sepia(0);
  filter: sepia(0);
}

Copier après la connexion

Ensuite, il est temps d'obtenir l'effet d'agrandissement de l'image. Ce que j'utilise ici est le style transform: scale(1,1). L'attribut transform peut appliquer une transformation 2D ou 3D à un élément, tandis que l'attribut scale est utilisé pour agrandir (un entier agrandira) ou rétrécir (un nombre négatif réduira). l'élément.

滤镜属性filter定义了元素(通常是<img  alt="Comment créer un effet d'agrandissement d'image sympa en utilisant du CSS3 pur ?" >)的可视效果(例如：模糊与饱和度)。

可以设置的滤镜效果：
blur(px)：给图像设置高斯模糊。    
brightness(%)：给图片应用一种线性乘法，使其看起来更亮或更暗。    
contrast(%) ：调整图像的对比度。    
drop-shadow(h-shadow v-shadow blur spread color)：给图像设置一个阴影效果。
grayscale(%)：将图像转换为灰度图像
hue-rotate(deg) ：给图像应用色相旋转。
invert(%) ：反转输入图像。
opacity(%)：转化图像的透明程度。
saturate(%)： 转换图像饱和度。
sepia(%) ： 将图像转换为深褐色。

Copier après la connexion

Comment créer un effet dagrandissement dimage sympa en utilisant du CSS3 pur ?

L'effet d'agrandissement de l'image obtenu de cette manière est brusque et s'agrandit soudainement lorsque la souris survole. Vous pouvez utiliser l'attribut de transition pour ajouter un effet de transition, car cet attribut est un nouvel attribut de CSS3 et un préfixe doit être ajouté. pour être compatible avec d'autres navigateursrrreee 3. gif

🎜Cela permettra d'obtenir le survol de la souris. L'effet de grossissement de l'image sera arrêté. Cependant, ce type d'effet de grossissement est un peu monotone. Nous pouvons définir l'attribut de filtre filter sur l'image pour rendre l'effet de grossissement de l'image encore plus cool ! 🎜🎜Nous pouvons d'abord rendre l'image grise (filtre : niveaux de gris(100%)) ou marron foncé (filtre : sépia(100%)), puis passer la souris sur Lorsque l'image est agrandie, la couleur changera en même temps (supprimez simplement l'effet de filtre), ce qui rendra les effets spéciaux plus cool. 🎜rrreee🎜🎜🎜rrreee🎜La plate-forme de site Web chinois PHP propose de nombreuses ressources pédagogiques vidéo. Bienvenue à tous pour apprendre le "🎜Tutoriel vidéo CSS🎜" ! 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!