CSS3 반사 예제 튜토리얼-HTML 튜토리얼-php.cn

CSS3 반사 예제 튜토리얼

巴扎黑

풀어 주다： 2017-06-27 09:08:07

원래의

1645명이 탐색했습니다.

예제 이미지

CSS3 이전에는 예시 이미지와 같은 반사 효과를 얻을 수 있는 유일한 방법은 CSS3 등장 이후에는 이러한 효과를 얻는 것이 매우 간단해졌습니다. 단 하나의 CSS3 속성으로 쉽게 구현할 수 있습니다.

오늘 말씀드릴 박스리플렉트 속성이 바로 이것입니다.

먼저 W3C에서 제공하는 box-reflect 구문을 살펴보겠습니다.

box-reflect: none | ? ? 즉, 후자의 두 속성은 필요하지 않습니다.)
= 위 | 아래 | 왼쪽 | 오른쪽을 나타냅니다. (각각 표시: 고정 값 | 백분율)
| <선형-그라디언트> ; 반복-방사형-그라디언트> (각각 표현: 마스크 이미지 없음 | 마스크 이미지 경로 | 선형 그라디언트 | 방사형 그라디언트 | 반복 선형 그라디언트 | 반복 방사형 그라디언트)
기본값: 없음

box-reflect는 2개를 제공할 수 있습니다. 하나는 기본값인 None, 즉 반사 효과가 없는 것입니다. 다른 하나는 3개의 속성 값을 동시에 할당할 수 있다는 것입니다. 반사 방향, 요소 및 반사에 추가된 마스크 이미지를 나타냅니다. 후자의 두 속성 값은 생략할 수 있지만 ;오프셋>이 필요합니다.

무미건조한 설명을 많이 한 후에는 몇 가지 예를 들어 이해하는 것이 더 좋을 것 같습니다.

이제 기사 시작 부분에 있는 예시 이미지의 투영 효과를 단계별로 구현하겠습니다.

①아래에는 하나의 속성 값만 지정하세요.

<!--HTML代码-->< img class="img" src="imgs/cat.jpg" />

로그인 후 복사

rrree

효과 달성:

②5px 간격을 추가합니다.

/*CSS代码*/.img{ -webkit-box-reflect: below; box-reflect: below;}

로그인 후 복사

효과 달성:

③마지막으로 그림 마스크를 추가합니다.

/*CSS代码*/.img{ -webkit-box-reflect: below 5px; box-reflect: below 5px;}

로그인 후 복사

여기의 그림 마스크는 그림을 사용하지 않지만 CSS3의 선형 그라데이션 속성 값을 사용합니다. 구체적인 사용법은 여기서 언급하지 않습니다. 매우 자세하게 작성되었습니다.

효과 달성:

이것은 기사 시작 부분에 있는 예시 그림의 최종 효과입니다.

다음으로 방사형 그래디언트로 이미지 마스크를 만들고 이미지 마스크를 직접 사용하는 방법에 대해 이야기하겠습니다.

방사형 그라디언트는 실제로 선형 그라디언트와 유사합니다. CSS3의 기본 방사형 그라디언트 방법만 익히면 됩니다.

/*CSS代码*/.img{ -webkit-box-reflect: below 5px -webkit-linear-gradient(transparent 60%,rgba(0,0,0,.3));box-reflect: below 5px linear-gradient(transparent 60%,rgba(0,0,0,.3));}

로그인 후 복사

얻은 효과:

효과가 훌륭합니다. 정말 고양이가 거울을 보는거 같아요~~

이미지마스크를 직접 사용해보면 어떨까요? 예를 들어, 이 사진을 마스크로 사용합니다:

/*CSS代码*/.img{ -webkit-box-reflect: left 0 -webkit-radial-gradient(#000 30%,transparent); box-reflect: left 0 radial-gradient(#000 30%,transparent);}

로그인 후 복사

효과는:

mask.png

마스크 사진이 반사 사진을 완전히 늘려 채우는 것을 볼 수 있습니다. 효과는 완전히 투명한 부분은 표시되지 않게 됩니다(사실 CSS3 그라데이션 이미지 마스킹 원리도 이와 같습니다).

위에서 언급한 모든 효과는 사진뿐만 아니라 텍스트 등 다른 요소에도 사용할 수 있다는 점에 유의하세요.

호환성: 박스리플렉트가 보기에는 매우 좋아 보이지만 아쉽게도 현재는 웹킷 코어 브라우저에서만 호환이 가능하지만 기본적으로 모바일 단말기에서는 문제가 없습니다~~

위 내용은 CSS3 반사 예제 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!