Heim >Web-Frontend >CSS-Tutorial >So erzielen Sie mit CSS3 einen Eselsohr-Effekt
So erzielen Sie mit CSS3 einen Eselsohr-Effekt
- 不言Original
- 2018-06-20 14:42:573633Durchsuche
In diesem Artikel wird hauptsächlich die Verwendung von CSS3 vorgestellt, um den Effekt des Faltens von Ecken zu erzielen. Wenn die Maus über das Bild bewegt wird, wird der Beispielcode im Artikel angegeben, um es für alle einfacher zu machen Verstehen und lernen. Lasst uns folgen. Lasst uns gemeinsam lernen.
Werfen wir zunächst einen Blick auf die statischen Renderings
Beispielcode
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body {
background-color: #eaf0f2;
}
h1{text-align: center;}
.box{width:500px;height:300px;margin:0 auto;position:relative;}
.img-layer{position: absolute;width: 500px;height: 300px;top: 0;left: 0;overflow: hidden;}
.img-layer img {width: 500px;cursor: pointer;}
.img-layer:before{ content: '';
position: absolute;
top: 0;
right: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 0;
border-color: rgba(0,0,0,0.2) #fff;
border-radius: 0 0 0 4px;
box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
-webkit-transition: all 0.4s ease-out;
transition:all 0.4s ease-out;}
.img-layer:hover:before{
border-right-width:100px;
border-bottom-width:100px;
}
</style>
</head>
<body>
<h1>折角效果</h1>
<p class="box">
<p class="img-layer">
<img src="<a href="http://p6.qhimg.com/d/inn/3f563406/table.jpg">http://p6.qhimg.com/d/inn/3f563406/table.jpg</a>" alt="">
</p>
</p>
</body>
</html>Das Obige ist der gesamte Inhalt dieses Artikels, der für das Lernen aller hilfreich sein wird. Bitte achten Sie auf die chinesische PHP-Website!
Verwandte Empfehlungen:
Wie man mit CSS Pfeile jeder Größe, jeder Richtung und jedes Winkels erzielt
Mit CSS3 die coole Black Cat Sheriff-Homepage realisieren
Das obige ist der detaillierte Inhalt vonSo erzielen Sie mit CSS3 einen Eselsohr-Effekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!