Reiner CSS3-Effekt für cooles Artikelkarten-UI-Design

Kurzes Tutorial

Dies ist ein cooler UI-Designeffekt für Artikelkarten, der mit reinem CSS3 erstellt wurde. Die Artikelkarte hat einen Schatteneffekt. Wenn die Maus über die Karte fährt, werden die Informationen zur Artikelbeschreibung in einer gleitenden Animation auf der Karte angezeigt.

So verwenden Sie die

HTML-Struktur

Die HTML-Struktur einer Karte ist wie folgt:

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

CSS-Stil

Die gesamten Kartenpaketbehälter sind in Flex ausgelegt.

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

Die Breite und Höhe jeder Karte sind auf 380 Pixel eingestellt. Und verwenden Sie die Box-Shadow-Eigenschaft, um einen großen Schatteneffekt für die Karte festzulegen, und legen Sie Übergangsanimationen für den Ease-Out-Effekt für alle Animationen fest.

.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;
}

Das Bild auf der Karte verwendet eine absolute Positionierung, wobei Breite und Höhe 100 % betragen und die gesamte Karte einnehmen.

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

Die Textebenenseite in der Karte verwendet eine absolute Positionierung und der Text wird über das Z-Index-Attribut über dem Bild platziert. Der h2-Text und der p-Text werden durch die Funktion TranslateX um -200 % verschoben, d. h. sie werden aus der Karte verschoben und sind zunächst unsichtbar.

.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;
}

Wenn die Maus über die Karte gleitet, wird der Schatten der Karte verändert und die Karte wird um das 1,05-fache vergrößert. Die Transparenz des Bildes auf der Karte wird auf 0,2 eingestellt, der Text kehrt an seine ursprüngliche Position zurück und die Transparenz wird auf 1 gesetzt.

.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;
}

Das Obige ist der Inhalt von CSS3, Artikelkarten und UI-Design. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!