CSS3-Hinweise: -webkit-box-reflect implementiert Reflektion-CSS-Tutorial-php.cn

CSS3-Hinweise: -webkit-box-reflect implementiert Reflektion

高洛峰

Freigeben： 2017-02-28 14:03:28

Original

1780 Leute haben es durchsucht

Wenn wir den Effekt der Reflexion erzielen möchten, besteht der allgemeine Ansatz normalerweise darin, mehrere DOM-Elemente zu verwenden, um sie absolut zu positionieren + zu skalieren (minus -1) oder zu drehen. 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 |. rechts |. links ]? ? In der Maskenebene ist der Versatz von entscheidender Bedeutung. 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

Das Anwendungsbeispiel ist wie folgt:

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 ähnliche Effekte in Firefox erzielen möchten, können Sie die Funktion -moz- element() verwenden, aber der Effekt ist bei Rotation ganz anders, wie unten gezeigt.

CSS3 Notes: -webkit-box-reflect实现倒影

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

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

CSS3 Notes: -webkit-box-reflect实现倒影

Wenn Sie mit dem IE-Browser kompatibel sein möchten, können Sie auch SVG oder Canvas verwenden. SVG verwendet hauptsächlich Muster+Maske+linearGradient+Skalierung und Canvas verwendet Skalierung+globalCompositeOperation.

CSS3 Notes: -webkit-box-reflect实现倒影 Der Code für das SVG-Beispiel lautet wie folgt:

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

<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

Die oben genannten sind die verschiedenen Methoden zur Reflexionsimplementierung. Im Vergleich dazu ist es besser, CSS3s -webkit-box-reflect zu verwenden, um den einfachsten Effekt zu erzielen. Ich hoffe, dass es für alle beim Lernen hilfreich sein wird, und ich hoffe auch, dass alle die chinesische PHP-Website unterstützen.

var canvas = document.getElementById(&#39;canvas&#39;),
    ctx = canvas.getContext(&#39;2d&#39;);

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 = &#39;destination-out&#39;;

ctx.fillStyle = linearGradient2;
ctx.fillRect(0,0,200,200);

Nach dem Login kopieren

Weitere CSS3-Hinweise: -webkit-box-reflect zur Implementierung reflexionsbezogener Artikel finden Sie auf der chinesischen PHP-Website!