Effet de conception d'interface utilisateur de carte d'article cool CSS3 pur

Bref tutoriel

Il s'agit d'un effet de conception d'interface utilisateur de carte d'article sympa réalisé en CSS3 pur. La fiche article a un effet d'ombre. Lorsque la souris glisse sur la carte, les informations de description de l'article seront affichées dans la fiche dans une animation coulissante.

Comment utiliser

Structure HTML

La structure HTML d'une carte est la suivante :

<div class="tile"> 
    <img src="img/1.jpg"/>
    <div class="text">
    <h1>文章标题</h1>
    <h2 class="animate-text">文章子标题</h2>
    <p class="animate-text">文章的描述信息</p>
    <div class="dots">
        <span></span>
        <span></span>
        <span></span>
    </div>
  </div>
</div>

Style CSS

L'ensemble des conteneurs du paquet de cartes sont disposés en flexible.

.wrap{
  margin:50px auto 60px auto;
  width:100%;
  display:flex;
  align-items:space-around;
  max-width:1200px;
}

La largeur et la hauteur de chaque carte sont fixées à 380 pixels. Et utilisez la propriété box-shadow pour définir un grand effet d'ombre pour la carte et définissez des animations de transition pour l'effet de sortie facile pour toutes les animations.

.tile{
  width:380px;
  height:380px;
  margin:10px;
  background-color:#99aeff;
  display:inline-block;
  background-size:cover;
  position:relative;
  cursor:pointer;
  transition: all 0.4s ease-out;
  box-shadow: 0px 35px 77px -17px rgba(0,0,0,0.44);
  overflow:hidden;
  color:white;
  font-family:'Microsoft YaHei',sans-serif;
}

L'image de la carte utilise un positionnement absolu, la largeur et la hauteur étant de 100 %, occupant toute la carte.

.tile img{
  height:100%;
  width:100%;
  position:absolute;
  top:0;
  left:0;
  z-index:0;
  transition: all 0.4s ease-out;
}

La page du calque de texte dans la carte utilise un positionnement absolu et le texte est placé au-dessus de l'image via l'attribut z-index. Le texte h2 et le texte p sont déplacés de -200 % via la fonction TranslateX, c'est-à-dire qu'ils sont déplacés hors de la carte et sont initialement invisibles.

.tile .text{
  z-index:99;
  position:absolute;
  padding:30px;
  height:calc(100% - 60px);
}
.tile h1{
  font-weight:300;
  margin:0;
  text-shadow: 2px 2px 10px rgba(0,0,0,0.3);
}
.tile h2{
  font-weight:100;
  margin:20px 0 0 0;
  font-style:italic;
   transform: translateX(200px);
}
.tile p{
  font-weight:300;
  margin:20px 0 0 0;
  line-height: 25px;
  transform: translateX(-200px);
  transition-delay: 0.2s;
}
.animate-text{
  opacity:0;
  transition: all 0.6s ease-in-out;
}

Lorsque la souris glisse sur la carte, l'ombre de la carte est modifiée et la carte est agrandie 1,05 fois. La transparence de l'image dans la carte est définie sur 0,2, le texte revient à sa position d'origine et la transparence est définie sur 1.

.tile:hover{
box-shadow: 0px 35px 77px -17px rgba(0,0,0,0.64);
  transform:scale(1.05);
}
.tile:hover img{
  opacity: 0.2;
}
.tile:hover .animate-text{
  transform:translateX(0);
  opacity:1;
}

Ce qui précède est le contenu de CSS3, les fiches d'articles et la conception de l'interface utilisateur. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !