CSS3 realisiert das Effektdiagramm zur Produktanzeige auf der Website

<div Klasse="Produkt">
  <ul>
   <li>
    <div Klasse="pro-img">
     <a href="#">
      <img src="images/pms_1524883847.49276938!220x220.jpg" alt="">
     </a>
    </div>
    <h3><a href="#">Xiaomi TV 4A 43-Zoll-Jugend-Edition</a></h3>
    <p class="desc">Full-HD-Bildschirm/ künstliche Intelligenz-Stimme</p>
    <p Klasse="Preis">
     <span>1499</span> Yuan<del>1699</del>
    </p>
    <div Klasse="Bewertung">
     <a href="#">
      <span class="msg">So gut wie immer, Xiaomi-Stimmung</span>
      <span class="auther">Kommentare von Überraschung</span>
     </a>
    </div>
   </li>
  </ul>
 </div>

* {
	Rand: 0;
	Polsterung: 0;
}

ul, ol {
	Listenstil: keiner;
}

Eingabe, Schaltfläche {
	Gliederung: keine;
	Rand: keiner;
}

A {
	Textdekoration: keine;
}

.clearfix::vorher,
.clearfix::nach {
	Inhalt: "";
	Höhe: 0;
	Zeilenhöhe: 0;
	Anzeige: Block;
	Sichtbarkeit: versteckt;
}

.clearfix::nach {
	klar: beides;
}

Körper {
	Polsterung: 100px;
	Hintergrundfarbe: #f5f5f5;
}

.Produkt li {
    schweben: links;
    Breite: 234px;
	Höhe: 246px;
    Polsterung: 34px 0 20px;
    Z-Index: 1;
    Rand links: 14px;
    Rand unten: 14px;
    Hintergrund: #fff;
    -webkit-transition: alle 0,2 s linear;
    Übergang: alle 0,2 s linear;
	Position: relativ;
}

.pro-img {
	Breite: 150px;
	Höhe: 150px;
	Rand: 0 automatisch 18px;
}

.pro-img a {
	Breite: 100 %;
	Höhe: 100%;
}

.pro-img img {
	Anzeige: Block;
	Breite: 100 %;
	Höhe: 100%;
}

.produkt li h3 {
	Rand: 0 10px;
    Schriftgröße: 14px;
    Schriftstärke: 400;
    Textausrichtung: zentriert;
}

.produkt li h3 a {
	Farbe: #333;
}

.desc {
	Rand: 0 10px 10px;
    Höhe: 18px;
    Schriftgröße: 12px;
    Textausrichtung: zentriert;
    Textüberlauf: Auslassungspunkte;
    Leerzeichen: Nowrap;
    Überlauf: versteckt;
    Farbe: #b0b0b0;
}

.Preis {
	Schriftgröße: 14px;
	Rand: 0 10px 10px;
    Textausrichtung: zentriert;
    Farbe: #ff6700;
}

.Preis del {
	Farbe: #b0b0b0;
}

.Rezension {
	Position: absolut;
    unten: 0;
    links: 0;
    Z-Index: 3;
    Breite: 234px;
    Höhe: 0;
    Überlauf: versteckt;
    Schriftgröße: 12px;
    Hintergrund: #ff6700;
    Deckkraft: 0;
    -webkit-transition: alle 0,2 s linear;
    Übergang: alle 0,2 s linear;
}

.überprüfen Sie eine {
	Farbe: #757575;
	Anzeige: Block;
    Polsterung: 8px 30px;
    Umriss: 0;
}

.überprüfen Sie einen Span {
	Anzeige: Block;
	Rand unten: 5px;
    Farbe: #fff;
}

.Produkt li:hover {
	-webkit-box-shadow: 0 15px 30px rgba(0,0,0,0,1);
    Kastenschatten: 0 15px 30px rgba (0,0,0,0,1);
    -webkit-transform: übersetzen3d(0, -2px, 0);
    transformieren: übersetzen3d(0, -2px, 0);
}

.Produkt li:hover .Bewertung {
	Deckkraft: 1;
	Höhe: 76px;
}