So erzielen Sie mit CSS3 einen Eselsohr-Effekt-CSS-Tutorial-php.cn

So erzielen Sie mit CSS3 einen Eselsohr-Effekt

不言

Freigeben： 2018-06-20 14:42:57

Original

3607 Leute haben es durchsucht

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>

Nach dem Login kopieren

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!