Heim > Artikel > Web-Frontend > So realisieren Sie eine Animation der Bildcover-Anzeige in CSS3

So realisieren Sie eine Animation der Bildcover-Anzeige in CSS3

php中世界最好的语言Original: 2017-11-24 14:01:261734Durchsuche

Lassen Sie mich Ihnen einen kleinen Fall geben, wie Sie Bild Animation für die Cover-Anzeige mit CSS3 implementieren. Die Anzeige von Bildcovern kann in vielen Situationen verwendet werden, z. B. auf Produktanzeigeseiten usw.

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>css3图片封面展示动画</title>
      <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <div class="cont s--inactive">
  <!-- cont inner start -->
  <div>
    <!-- el start -->
    <div>
      <div>
        <div>
          <div></div>
          <div>
            <h2>Section 1</h2>
          </div>
          <div>
            <div>Whatever</div>
            <div></div>
          </div>
        </div>
      </div>
      <div>
        <div>1</div>
        <div>
          <div data-index="1">1</div>
        </div>
      </div>
    </div>
    <!-- el end -->
    <!-- el start -->
    <div>
      <div>
        <div>
          <div></div>
          <div>
            <h2>Section 2</h2>
          </div>
          <div>
            <div>Whatever</div>
            <div></div>
          </div>
        </div>
      </div>
      <div>
        <div>2</div>
        <div>
          <div data-index="2">2</div>
        </div>
      </div>
    </div>
    <!-- el end -->
    <!-- el start -->
    <div>
      <div>
        <div>
          <div></div>
          <div>
            <h2>Section 3</h2>
          </div>
          <div>
            <div>Whatever</div>
            <div></div>
          </div>
        </div>
      </div>
      <div>
        <div>3</div>
        <div>
          <div data-index="3">3</div>
        </div>
      </div>
    </div>
    <!-- el end -->
    <!-- el start -->
    <div>
      <div>
        <div>
          <div></div>
          <div>
            <h2>Section 4</h2>
          </div>
          <div>
            <div>Whatever</div>
            <div></div>
          </div>
        </div>
      </div>
      <div>
        <div>4</div>
        <div>
          <div data-index="4">4</div>
        </div>
      </div>
    </div>
    <!-- el end -->
    <!-- el start -->
    <div>
      <div>
        <div>
          <div></div>
          <div>
            <h2>Section 5</h2>
          </div>
          <div>
            <div>Whatever</div>
            <div></div>
          </div>
        </div>
      </div>
      <div>
        <div>5</div>
        <div>
          <div data-index="5">5</div>
        </div>
      </div>
    </div>
    <!-- el end -->
  </div>
  <!-- cont inner end -->
</div>
 
 
    <script src="js/index.js"></script>
 
</body>
</html>

Das sind alle Einsatzmöglichkeiten von Animationen, die auf dem Bildcover gezeigt werden. Weitere spannende Inhalte finden Sie auf der chinesischen PHP-Website anderen verwandten Artikeln!

Verwandte Lektüre:

Was sind die neuen Hintergrundattribute in CSS3?

Was sind die Webstandards in HTML?

So erstellen Sie ein responsives Layout mit CSS3

Das obige ist der detaillierte Inhalt vonSo realisieren Sie eine Animation der Bildcover-Anzeige in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So erstellen Sie einen Folienwechsel-Animationseffekt in CSS3Nächster Artikel：So erstellen Sie einen Folienwechsel-Animationseffekt in CSS3

In Verbindung stehende Artikel

Mehr sehen