CSS3 반사 예제 튜토리얼

Share

예제 이미지

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：

css css3

원천：php.cn

이전 기사：Vue 고급 튜토리얼: v-model에 대한 자세한 설명 다음 기사：Swiper 캐러셀 이미지 소스코드 공유 분석

본 웹사이트의 성명

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

저자별 최신 기사

• PHP 배열에 요소를 추가하는 방법
  2023-03-14 15:58:02
• 간단한 객관식 평가 시스템을 구현하는 JS를 보여주는 예
  1970-01-01 08:00:00
• 동일한 IP의 여러 제출을 제한하는 PHP 솔루션
  2023-03-15 07:38:01
• 정규식을 사용하여 HTML에서 양식 유효성 검사 구현
  1970-01-01 08:00:00
• JavaScript 엄격 모드의 포인팅 문제에 대한 자세한 설명
  1970-01-01 08:00:00
• Java로 트리 메뉴(다단계 메뉴 포함)를 작성하기 위한 예제 코드
  1970-01-01 08:00:00
• 마우스 오버 시 부드러운 전환을 구현하는 CSS3의 예에 대한 자세한 설명
  1970-01-01 08:00:00
• Swiper 캐러셀 이미지 소스코드 공유 분석
  1970-01-01 08:00:00
• VsCode 플러그인 요약 및 구성
  1970-01-01 08:00:00
• HttpUtils 요청 도구 클래스 코드
  1970-01-01 08:00:00

최신 이슈

투명한 반원 컷아웃이 있는 Div CSS3만을 사용하여 투명하게 잘린 반원 모양을 만들고 싶습니다. 유일한 요구 사항은 모양을 형성하는 모든 요소가 검은색이거나 투명해야 한다는 것입니다. 반원은 ...

에서 2023-10-22 17:51:09

0

2

303

SVG에서 삽입 그림자를 만드는 방법 CSS3에 인라인 상자 그림자가 있는 것처럼 인라인 그림자가 있는 상자를 만들어야 합니다. 지금까지 내가 찾은 것은 feGaussianBlur를 사용한 필터이지만...

에서 2023-10-21 15:57:11

0

2

232

CSS3 전환으로 그라데이션 배경 강화 CSS를 사용하여 축소판 이미지에 전환을 적용하여 마우스를 올리면 배경이 페이드인되도록 하려고 합니다. 변환이 작동하지 않지만 rgba() 값으로 변경하면 훌륭하...

에서 2023-10-12 18:05:11

0

2

213

그라데이션 배경과 함께 CSS3 전환 사용 CSS를 사용하여 축소판 이미지에 전환을 적용하여 마우스를 올리면 배경이 페이드인되도록 하려고 합니다. 변환이 작동하지 않지만 rgba() 값으로 변경하면 제대로...

에서 2023-08-23 21:25:42

0

2

324

배경 이미지에 CSS 필터를 적용하는 방법 검색 페이지의 배경 이미지로 사용하는 JPEG 파일이 있고 Backbone.js 컨텍스트에서 작업하기 때문에 CSS를 사용하여 이를 설정하고 있습니다. backg...

에서 2023-08-23 14:06:46

0

2

189

관련 주제

더>

• CSS
• CSS3 튜토리얼
• CSS 중심
• CSS에 그림을 삽입하는 방법
• 디스플레이 너머의 CSS...
• CSS 글꼴 색상
• CSS는 무엇입니까?
• CSS에서 삼각형을 작성하는 방법