Heim > Artikel > Web-Frontend > CSS3-Hinweise: -webkit-box-reflect implementiert Reflektion

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

高洛峰Original: 2017-02-28 14:03:281818Durchsuche

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 ]? f64b6a55ab9e6ef9d223847f6e594c7e? 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>

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>

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>

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

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

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：3D-WürfelrotationsanimationNächster Artikel：3D-Würfelrotationsanimation

In Verbindung stehende Artikel

Mehr sehen