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

집

웹 프론트엔드

CSS 튜토리얼

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

青灯夜游

Aug 20, 2021 pm 06:24 PM

css3돋보기마우스 오버

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

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

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

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



<!-- 深褐色滤镜 -->
<div>
  <img  class="sepia-img lazy" src="/static/imghwm/default1.png" data-src="demo/img/1.jpg" alt="순수 CSS3를 사용하여 멋진 이미지 확대 효과를 만드는 방법은 무엇입니까?" >
</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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

맨티스BT

Mantis는 제품 결함 추적을 돕기 위해 설계된 배포하기 쉬운 웹 기반 결함 추적 도구입니다. PHP, MySQL 및 웹 서버가 필요합니다. 데모 및 호스팅 서비스를 확인해 보세요.

MinGW - Windows용 미니멀리스트 GNU

이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.