Heim > Artikel > Web-Frontend > So stellen Sie das Bild in CSS auf Sechseck ein
So stellen Sie das Bild in CSS auf Sechseck ein
- 藏色散人Original
- 2021-02-28 14:43:304192Durchsuche
So legen Sie ein sechseckiges Bild in CSS fest: Erstellen Sie zunächst eine HTML-Beispieldatei. Fügen Sie dann das Bild in den Textkörper ein Das ist es.
Die Betriebsumgebung dieses Tutorials: Windows 7-System, HTML5- und CSS3-Version, Dell G3-Computer.
CSS3 realisiert den sechseckigen Div-Bildanzeigeeffekt
2. Prinzipielle Erklärung für diesen Effekt: 
2. Überlauf: versteckt; jenseits des Versteckens
3. Sichtbarkeit: versteckt; ähnlich wie display:none;, aber der Unterschied besteht darin, dass es zwar ausgeblendet ist, aber dennoch eine Position auf der Webseite einnimmt
Wir Um diesen Effekt zu erzielen, müssen 3 Schichten p zum Drehen verwendet werden (Hinweis: Die Größe der 3 Schichten p ist gleich). Die äußerste Schicht p (boxF) wird um 120 Grad gedreht, die zweite Schicht (boxS) wird um -60 Grad gedreht und die dritte Schicht (boxT) wird um weitere -60 Grad gedreht, was gerade wieder dem Normalzustand entspricht. Unser Bild wird im p-Hintergrund der Ebene 3 platziert. Da die ersten beiden Ebenen p nichts enthalten, werden sie lediglich zum Drehen verwendet, um ein Sechseck zu erhalten. Daher ist für die Ebenen 1 und 2 die Sichtbarkeit: Ausgeblendet festgelegt, und die dritte Ebene p ist für Bilder vorgesehen und muss angezeigt werden Sichtbarkeit: sichtbar; (Hinweis: Wenn Sie Sichtbarkeit: sichtbar; auf der dritten Ebene p nicht festlegen, wird standardmäßig die Sichtbarkeit: verborgen; der zweiten Ebene p(boxS) geerbt.) Nach der Rotation wird es definitiv überschüssige Teile geben, also setze overflow:hidden;
für alle drei ps. Nach der Rotation und dem Ausblenden der überschüssigen Teile können wir das gewünschte Sechseck erhalten. Beachten Sie außerdem, dass das Breiten-Höhen-Verhältnis von p 4:5 entsprechen muss, sonst ist das Ergebnis kein Sechseck. Im Effektbild oben. Wir haben auch ein p (Overlay) in der dritten Ebene (BoxT) platziert. Dieses p wird zum Maskieren verwendet. Wenn die Maus über die 6-seitige Form bewegt wird, entsteht ein Maskierungseffekt. Es gibt ein a-Tag in p(overlay) mit einem +-Zeichen darin. Wenn Sie auf das a-Tag klicken, wird die Ebene eingeblendet und das große Bild angezeigt (Hinweis: Dieser js-Effekt wurde noch nicht geschrieben).
3. DEMO-Code des obigen Renderings [Empfohlen: „
CSS-Video-Tutorial“]<!DOCTYPE html><html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3 实现六边形图片展示效果</title>
<style type="text/css">
body, p, img, ul, li {
margin: 0;
padding: 0;
}
body {
font-size: 12px;
background-color: #DDD;
min-width: 1200px;
}
ul, ul li {
list-style: none;
}
.clear {
clear: both;
}
.box {
position: relative;
width: 630px;
margin: 100px auto;
}
.lineF, .lineS {
position: absolute;
visibility: hidden;
}
.lineS {
top: 182px;
left: 105px;
}
.boxF, .boxS, .boxT, .overlay {
width: 200px;
height: 250px;
overflow: hidden;
}
.boxF, .boxS {
visibility: hidden;
}
.boxF {
transform: rotate(120deg);
float: left;
margin-left: 10px;
-ms-transform: rotate(120deg);
-moz-transform: rotate(120deg);
-webkit-transform: rotate(120deg);
}
.boxS {
transform: rotate(-60deg);
-ms-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-webkit-transform: rotate(-60deg);
}
.boxT {
transform: rotate(-60deg);
background: no-repeat 50% center;
background-size: 125% auto;
-ms-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-webkit-transform: rotate(-60deg);
visibility: visible;
}
.overlay {
transition: all 250ms ease-in-out 0s;
display: none;
position: relative;
}
.overlay:hover {
background-color: rgba(0,0,0,0.6);
}
.boxT:hover .overlay {
display: block;
}
.overlay a {
display: inline-block;
position: absolute;
left: 50%;
top: 50%;
margin: -16px 0 0 -16px;
border-radius: 3px;
background-color: #d3b850;
text-align: center;
line-height: 32px;
width: 32px;
height: 32px;
text-decoration: none;
color: White;
font-size: 18px;
font-weight: bolder;
}
</style></head><body>
<p class="box">
<!--第一行(lineFirst)-->
<p class="lineF">
<p class="boxF">
<p class="boxS">
<p class="boxT" style="background-image: url(img/1.jpg);">
<p class="overlay">
<a href="#">+</a>
</p>
</p>
</p>
</p>
<p class="boxF">
<p class="boxS">
<p class="boxT" style="background-image: url(img/2.jpg);">
<p class="overlay">
<a href="#">+</a>
</p>
</p>
</p>
</p>
<p class="boxF">
<p class="boxS">
<p class="boxT" style="background-image: url(img/3.jpg);">
<p class="overlay">
<a href="#">+</a>
</p>
</p>
</p>
</p>
</p>
<!--第二行(lineSecond)-->
<p class="lineS">
<p class="boxF">
<p class="boxS">
<p class="boxT" style="background-image: url(img/4.jpg);">
<p class="overlay">
<a href="#">+</a>
</p>
</p>
</p>
</p>
<p class="boxF">
<p class="boxS">
<p class="boxT" style="background-image: url(img/5.jpg);">
<p class="overlay">
<a href="#">+</a>
</p>
</p>
</p>
</p>
</p>
</p></body></html> – Wenn Sie den Effekt sehen möchten, kopieren Sie einfach den DEMO-Code , für Versionen unter IE9 Nicht unterstützt. Das obige ist der detaillierte Inhalt vonSo stellen Sie das Bild in CSS auf Sechseck ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!