Heim >Web-Frontend >CSS-Tutorial >CSS3-Hinweise: -webkit-box-reflect implementiert Reflektion
CSS3-Hinweise: -webkit-box-reflect implementiert Reflektion
- 高洛峰Original
- 2017-02-28 14:03:281877Durchsuche
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. 
<!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
Der Code für das SVG-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('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);Weitere CSS3-Hinweise: -webkit-box-reflect zur Implementierung reflexionsbezogener Artikel finden Sie auf der chinesischen PHP-Website!