Heim >Web-Frontend >CSS-Tutorial >box-reflect erzielt einen Reflexionseffekt
box-reflect erzielt einen Reflexionseffekt
- php中世界最好的语言Original
- 2018-03-22 17:02:322156Durchsuche
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-ElementeAbsolute 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 ]?! ! ! 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:
<!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 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.
<!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>
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>
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);
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!