이번에는 반사 효과를 얻기 위한 박스 반사를 가져오겠습니다. 반사 효과를 얻기 위한 박스 반사의 주의사항은 무엇인가요?
일반적으로 반사 효과를 얻으려는 경우 일반적인 접근 방식은 여러 DOM 요소 절대 위치 지정+크기 조정(마이너스 -1) 또는 회전을 사용하는 것입니다. 이 방법의 단점은 공간을 차지하고 DOM 요소가 너무 많다는 것입니다.
웹킷 커널을 사용하는 브라우저(크롬, 사파리, 모바일 브라우저)에서는 -webkit-box-reflect 속성을 사용하여 반사를 구현할 수 있습니다.
[위 | 아래 오른쪽 | ;길이>?<이미지>?
이 값에는 방향 + 오프셋 + 마스크 레이어의 세 부분이 포함됩니다.
마스크 레이어를 사용할 때 방향은 필수입니다. 오프셋이 적으면 대신 0을 사용하세요
! ! ! 중요: 마스크 레이어의 효과는 색상과 관련이 없습니다. 예를 들어 그라데이션 색상을 마스크로 사용하는 경우 단색이면 투명하게 되고 투명하면 원래 색상이 됩니다. 노출됩니다
사용 예는 다음과 같습니다.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> <style type="text/csss"> .box{ width:200px; height:200px; margin-bottom:20px;transform:scale(-1,1); background-image:linear-gradient(90deg,red,yellow);-webkit-box-reflect:below 10px linear-gradient(180deg,transparent,#000); } </style> </head> <body> <p class="box"></p> </body> </html>
효과는 다음과 같습니다.
firefox에서 비슷한 효과를 얻으려면 -moz-element() 함수를 사용할 수 있습니다. 이를 달성하려면 아래 그림과 같이 회전 시 효과가 상당히 다릅니다.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> <style type="text/css"> .box{ width:200px; height:200px; margin:100px 0 0 100px; } .box1{ background-image:linear-gradient(180deg,red,yellow); transform:scale(1,-1) rotate(45deg)} .box2{ background-image:-moz-element(#box1); } </style> </head> <body> <p class="box box1" id="box1"></p> <p class="box box2" id="box2"></p> </body> </html>
크롬에서 -webkit-box-reflect를 사용하면 이런 효과가 있습니다
IE 브라우저와 호환을 원하시면 SVG나 캔버스를 주로 사용하셔도 됩니다. +linearGradient+ 크기 조정을 위해 캔버스는 scale+globalCompositeOperation을 사용합니다.
SVG 예제의 코드는 다음과 같습니다.
<svg width="200" height="200"> <defs> <linearGradient id="a" x1="0" y1="0" x2="0" y2="1"> <stop offset="0%" style="stop-color:yellow"/> <stop offset="100%" style="stop-color:red"/> </linearGradient> <linearGradient id="b" x1="0" y1="0" x2="0" y2="100%"> <stop offset="0%" style="stop-color:rgba(255,255,255,0)"/> <stop offset="100%" style="stop-color:rgba(255,255,255,1)"/> </linearGradient> <mask id="c" x="0" y="0" width="1" height="1"> <rect x="0" y="0" width="100%" height="100%" style="fill:url(#b)" /> </mask> </defs> <rect x="0" y="0" width="200" height="200" style="fill:url(#a);" mask="url(#c)"> </svg>
캔버스 예제의 코드는 다음과 같습니다.
var canvas = document.getElementById('canvas'), ctx = canvas.getContext('2d'); var linearGradient1 = ctx.createLinearGradient(0,0,0,200); linearGradient1.addColorStop(0,"red"); linearGradient1.addColorStop(1,"yellow"); var linearGradient2 = ctx.createLinearGradient(0,0,0,200); linearGradient2.addColorStop(0,"transparent"); linearGradient2.addColorStop(1,"#ffffff"); ctx.fillStyle = linearGradient1; ctx.fillRect(0,0,200,200); ctx.globalCompositeOperation = 'destination-out'; ctx.fillStyle = linearGradient2; ctx.fillRect(0,0,200,200);
이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 주목해 주세요. PHP 중국어 웹사이트의 다른 관련 기사를 확인해보세요!
추천 자료:
width:100%;의 중앙 레이아웃 요약과 width:auto
폭포 흐름 레이아웃과 무한 로딩 사진 앨범 효과 사용의 차이점
위 내용은 box-reflect는 반사 효과를 얻습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!