Comment utiliser CSS3 pour obtenir un effet d'oreille de chien-tutoriel CSS-php.cn

Comment utiliser CSS3 pour obtenir un effet d'oreille de chien

不言

Libérer： 2018-06-20 14:42:57

original

3557 Les gens l'ont consulté

Cet article présente principalement l'utilisation de CSS3 pour obtenir l'effet de pliage des coins Lorsque la souris passe sur l'image, l'effet de pliage des coins apparaîtra. L'exemple de code est donné dans l'article pour faciliter la tâche de tout le monde. comprendre et apprendre. Suivons Apprenons ensemble.

Jetons d'abord un coup d'œil aux rendus statiques

Exemple de code

<!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>

Copier après la connexion

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'apprentissage de chacun pour en savoir plus. contenu, veuillez faire attention à PHP Chinese net !

Recommandations associées :

Comment utiliser CSS pour obtenir des flèches de n'importe quelle taille, n'importe quelle direction et n'importe quel angle

Utilisez CSS3 pour réaliser la superbe page d'accueil de Black Cat Sheriff

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!