Heim > Artikel > Web-Frontend > So erzielen Sie mit CSS3 einen Eselsohr-Effekt

So erzielen Sie mit CSS3 einen Eselsohr-Effekt

不言Original: 2018-06-20 14:42:573614Durchsuche

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: &#39;&#39;;
    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!

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：Wie man mit CSS Pfeile in beliebiger Größe, Richtung und Winkel erstelltNächster Artikel：Wie man mit CSS Pfeile in beliebiger Größe, Richtung und Winkel erstellt

In Verbindung stehende Artikel

Mehr sehen