Maison > Article > interface Web > Comment utiliser CSS3 pour obtenir un effet d'oreille de chien

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

不言original: 2018-06-20 14:42:573612parcourir

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>

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment utiliser CSS pour obtenir des flèches de n'importe quelle taille, direction et angleArticle suivant：Comment utiliser CSS pour obtenir des flèches de n'importe quelle taille, direction et angle

Articles Liés

Voir plus