순수 CSS3를 사용하여 멋진 이미지 확대 효과를 만드는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

순수 CSS3를 사용하여 멋진 이미지 확대 효과를 만드는 방법은 무엇입니까?

青灯夜游

풀어 주다： 2021-08-24 09:36:46

원래의

1922명이 탐색했습니다.

"CSS3를 사용하여 멋진 삼각형 배경 이미지 만들기" 기사에서는 CSS3를 사용하여 멋진 삼각형 배경 이미지를 만들어 웹페이지를 고급스러워 보이게 만드는 방법을 소개했습니다! 이번에는 순수한 CSS3를 사용하여 마우스 오버 이미지 확대 효과를 얻는 방법에 대해 이야기하겠습니다. 관심 있는 친구들은 더 자세히 알아볼 수 있습니다~

마우스 오버 이미지 확대 효과는 매우 유용하고 눈길을 끄는 특수 효과입니다. 웹 페이지에 상호 작용을 추가합니다. 사용자가 이미지 위에 마우스를 올리면 이미지가 약간 확대됩니다. 이미지 표시 페이지에 적합하며 사용자 경험을 크게 향상시킬 수 있습니다!

코드부터 직접 시작해 보겠습니다.

<!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="순수 CSS3를 사용하여 멋진 이미지 확대 효과를 만드는 방법은 무엇입니까?" >
</div>
<!-- 灰度滤镜 -->
<div class="img-wrapper">
  <img  class="grayscale-img" src="demo/img/1.jpg"/ alt="순수 CSS3를 사용하여 멋진 이미지 확대 효과를 만드는 방법은 무엇입니까?" >
</div>

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

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

로그인 후 복사

효과는 아래와 같습니다.

순수 CSS3를 사용하여 멋진 이미지 확대 효과를 만드는 방법은 무엇입니까?

자, 위 코드를 분석해 보겠습니다.

먼저 div를 만들어 img 태그를 래핑합니다. is : 사진을 확대할 때 사진이 당사가 지정한 너비와 높이를 초과하지 않도록 사진을 차단합니다. div가 이 기능을 수행하도록 하려면 키 스타일 overflow:hidden이 필요합니다. 이렇게 하면 이미지가 확대될 때 초과 부분이 숨겨집니다. overflow: hidden；这样当图片放大时，超出部分会被隐藏。

<div class="img-wrapper">
  <img  src="demo/img/1.jpg"/ alt="순수 CSS3를 사용하여 멋진 이미지 확대 효과를 만드는 방법은 무엇입니까?" >
</div>

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

로그인 후 복사

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

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

로그인 후 복사

순수 CSS3를 사용하여 멋진 이미지 확대 효과를 만드는 방법은 무엇입니까?

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

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

로그인 후 복사

순수 CSS3를 사용하여 멋진 이미지 확대 효과를 만드는 방법은 무엇입니까?

这样就实现鼠标悬停图片放大效果了。但是这样的放大效果有点单调，我们可以给图片设置滤镜属性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);
}

로그인 후 복사

이제 이미지 확대 효과를 얻을 차례입니다. 여기서 사용하는 것은 transform: scale(1,1) 스타일입니다. transform 속성은 요소에 2D 또는 3D 변환을 적용할 수 있는 반면, scale은 확대(정수는 확대됨) 또는 축소(음수는 축소됨)에 사용됩니다. 요소.

滤镜属性filter定义了元素(通常是<img  alt="순수 CSS3를 사용하여 멋진 이미지 확대 효과를 만드는 방법은 무엇입니까?" >)的可视效果(例如：模糊与饱和度)。

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

로그인 후 복사

순수 CSS3를 사용하여 멋진 이미지 확대 효과를 만드는 방법은 무엇입니까?

이런 방식으로 얻은 이미지 확대 효과는 갑작스럽고, 마우스를 올리면 갑자기 확대됩니다. 전환 속성을 사용하면 전환 효과를 추가할 수 있습니다. 이 속성은 CSS3의 새로운 속성이고 접두사를 추가해야 하기 때문입니다. 다른 브라우저와 호환되도록rrreee 3. gif

🎜이렇게 하면 마우스 호버가 달성됩니다. 사진 확대 효과가 중지되었습니다. 그러나 이러한 종류의 확대 효과는 다소 단조롭습니다. 이미지 확대 효과를 더욱 멋지게 만들기 위해 이미지에 필터 속성 filter를 설정할 수 있습니다! 🎜🎜먼저 이미지를 회색(filter: greyscale(100%)) 또는 어두운 갈색(filter: sepia(100%))으로 만든 다음 마우스를 가져갈 수 있습니다. 사진을 확대하면 색상이 동시에 변경되어(필터 효과만 제거하면 됨) 특수 효과가 더욱 멋집니다. 🎜rrreee🎜🎜🎜rrreee🎜PHP 중국어 웹사이트 플랫폼에는 "🎜css 비디오 튜토리얼🎜"을 배우는 것을 환영합니다! 🎜

위 내용은 순수 CSS3를 사용하여 멋진 이미지 확대 효과를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!