CSS3에서 이미지 조명 및 그림자 효과를 얻는 방법은 무엇입니까? CSS3 이미지에서 빛과 그림자를 구현하는 방법 소개
- 不言원래의
- 2018-10-10 15:16:234264검색
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="images/pandas.jpg" style="max-width:90%" height="150px" alt="CSS3에서 이미지 조명 및 그림자 효과를 얻는 방법은 무엇입니까? CSS3 이미지에서 빛과 그림자를 구현하는 방법 소개" ></a>
<i class="light"></i>
</p>
</body>
</html>css3 사진의 빛과 그림자 효과는 다음과 같습니다.
위는 이 글의 전체 내용입니다. CSS3의 전환 속성과 변환 속성에 대한 자세한 설명은 다음을 참조하세요. css3 학습 매뉴얼을 참조하세요.
위 내용은 CSS3에서 이미지 조명 및 그림자 효과를 얻는 방법은 무엇입니까? CSS3 이미지에서 빛과 그림자를 구현하는 방법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!