box-reflect erzielt einen Reflexionseffekt-CSS-Tutorial-php.cn

box-reflect erzielt einen Reflexionseffekt

php中世界最好的语言

Freigeben： 2018-03-22 17:02:32

Original

2034 Leute haben es durchsucht

Dieses Mal bringe ich Ihnen Box-Reflect, um den Reflexionseffekt zu erzielen. Was sind die Vorsichtsmaßnahmen für Box-Reflect, um den Reflexionseffekt zu erzielen? Das Folgende ist ein praktischer Fall.

Wenn wir den Reflexionseffekt erzielen möchten, besteht der allgemeine Ansatz normalerweise darin, mehrere DOM-Elemente

Absolute Positionierung+Skalierung (minus -1) oder Drehung zu verwenden. Der Nachteil dieser Methode besteht darin, dass sie Platz beansprucht und zu viele DOM-Elemente enthält.

In Browsern, die den Webkit-Kernel verwenden (Chrome, Safari, mobile Browser), können Sie das Attribut -webkit-box-reflect verwenden, um Reflektion zu implementieren. Die Syntax lautet wie folgt

[ oben | unten |. right |. left ]? ? Wenn nicht, verwenden Sie stattdessen Null

! ! ! Wichtig

: Der Effekt der Maskenebene hat nichts mit der Farbe zu tun. Wenn Sie beispielsweise eine Verlaufsfarbe als Maske verwenden, ist diese transparent, wenn sie transparent ist Die Originalfarbe wird freigelegt.

Anwendungsbeispiele lauten wie folgt. Wie gezeigt:

Der Effekt ist wie folgt:

<!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>

Nach dem Login kopieren

Wenn Sie in Firefox ähnliche Effekte erzielen müssen, können Sie dies mit der Funktion -moz-element() erreichen, aber der Effekt ist bei Rotation ganz anders, wie unten gezeigt.

Der Effekt der Verwendung von -webkit-box-reflect unter Chrome ist wie folgt

<!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>

Nach dem Login kopieren

Wenn Sie Wenn Sie mit IE-Browsern kompatibel sind, können Sie auch SVG oder Canvas verwenden. SVG verwendet hauptsächlich Muster+Maske+linearGradient+Skala und Canvas verwendet Skalierung+GlobalCompositeOperation.

Der Code für das SVG-Beispiel lautet wie folgt:

Der Code für das Canvas-Beispiel lautet wie folgt

Ich glaube, Sie beherrschen die Methode Nachdem Sie den Fall in diesem Artikel gelesen haben, kommen Sie bitte für weitere spannende Informationen vorbei. Achten Sie auf andere verwandte Artikel auf der chinesischen PHP-Website!

<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>

Nach dem Login kopieren

Empfohlene Lektüre:

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);

Nach dem Login kopieren

Zusammenfassung des zentrierten Layouts von CSS

Der Unterschied zwischen der Verwendung von width:100%; und width:auto

Wasserfall-Flow-Layout und unendlich ladender Fotoalbum-Effekt

Das obige ist der detaillierte Inhalt vonbox-reflect erzielt einen Reflexionseffekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!