CSS3에서 이미지 조명 및 그림자 효과를 얻는 방법은 무엇입니까? CSS3 이미지에서 빛과 그림자를 구현하는 방법 소개-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS3에서 이미지 조명 및 그림자 효과를 얻는 방법은 무엇입니까? CSS3 이미지에서 빛과 그림자를 구현하는 방법 소개

不言

Oct 10, 2018 pm 03:16 PM

css3

CSS3를 학습하는 과정에서 우리는 CSS3의 새로운 속성 중 일부가 멋진 효과를 쉽게 얻을 수 있다는 것을 알았습니다. 이 글에서는 그림의 빛과 그림자 효과라는 특수 효과를 소개할 것입니다. 사진의 빛과 그림자 효과는 무엇입니까? 가끔 웹페이지에서 그림을 볼 수 있는데, 이 그림에 마우스를 올리면 그림에 빛과 그림자가 그려지는데, CSS3를 활용하면 아주 재미있지 않나요? 이를 이해하기 위해 더 이상 고민하지 않고 바로 본문으로 넘어가겠습니다.

우선, 우리는 이 글에서 CSS3가 이미지의 빛과 그림자 효과를 얻기 위해 전환 속성과 변환 속성을 사용해야 한다는 것을 알아야 합니다.

전환 속성과 변환 속성에 대해 간단히 살펴보겠습니다.

transition 속성은 네 가지 전환 속성을 설정하기 위한 단축 속성입니다.

transition-property: 전환 효과를 설정하는 CSS 속성의 이름을 지정합니다.

transition-duration: 전환 효과를 완료하는 데 걸리는 시간(초 또는 밀리초)을 지정합니다.

transition-timing-function: 속도 효과의 속도 곡선을 지정합니다.

transition-delay: 전환 효과가 시작되는 시기를 정의합니다.

transform 속성은 요소에 2D 또는 3D 변환을 적용합니다. 이 속성을 사용하면 요소를 회전, 크기 조정, 이동 또는 기울일 수 있습니다.

이 두 가지 속성을 읽은 후 css3 이미지 빛과 그림자 구현을 위한 코드를 직접 살펴보겠습니다.

아이디어: 투명 레이어 i를 설정하고, 기울이기x는 X축에서 -25도 변형하고 배경색은 CSS3의 선형 그라데이션은 선형 그라데이션이며 마우스 오버 시 애니메이션 시간을 0.5초로 설정합니다. 동시에 레이어 i에서 커서:포인터를 사용합니다. 이것이 설정되지 않은 경우 포인터를 보려면 투명 레이어가 애니메이션될 때까지 기다려야 합니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="">
 .overimg {
position: relative;
display: block; /* overflow: hidden;*/
-webkit-box-shadow: 0 0 10px #FFF;
box-shadow: 0 0 10px #FFF; /* overflow: hidden;*/
}
.light {
cursor: pointer;
position: absolute;
left: -100px;
top: 0;
width: 180px;
height: 90px;
background-image: -webkit-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0));
background-image: -moz-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0));
background-image: -o-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0));
background-image: -ms-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0));
background-image: linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0));
-webkit-transform: skewx(-25deg);
-moz-transform: skewx(-25deg);
-o-transform: skewx(-25deg);
-ms-transform: skewx(-25deg);
transform: skewx(-25deg);
}
.overimg:hover .light {
left: 180px;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
-ms-transition: 0.5s;
transition: 0.5s;
}        
}
</style>
</head>
<body>
   <p class="overimg">
    <a><img  src="/static/imghwm/default1.png"  data-src="images/pandas.jpg"  class="lazy"      style="max-width:90%" height="150px" alt="CSS3에서 이미지 조명 및 그림자 효과를 얻는 방법은 무엇입니까? CSS3 이미지에서 빛과 그림자를 구현하는 방법 소개" ></a>
    <i class="light"></i>
</p>
</body>
</html>

css3 사진의 빛과 그림자 효과는 다음과 같습니다.

CSS3에서 이미지 조명 및 그림자 효과를 얻는 방법은 무엇입니까? CSS3 이미지에서 빛과 그림자를 구현하는 방법 소개

위는 이 글의 전체 내용입니다. CSS3의 전환 속성과 변환 속성에 대한 자세한 설명은 다음을 참조하세요. css3 학습 매뉴얼을 참조하세요.

위 내용은 CSS3에서 이미지 조명 및 그림자 효과를 얻는 방법은 무엇입니까? 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를 무료로 생성하십시오.

뜨거운 도구

MinGW - Windows용 미니멀리스트 GNU

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

SublimeText3 Linux 새 버전

SublimeText3 Linux 최신 버전

DVWA

DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는