Comment réaliser une animation de l'affichage de la couverture de l'image en CSS3-tutoriel CSS-php.cn

Comment réaliser une animation de l'affichage de la couverture de l'image en CSS3

php中世界最好的语言

Libérer： 2017-11-24 14:01:26

original

1814 Les gens l'ont consulté

Laissez-moi vous donner un petit cas, comment implémenter une image animation pour l'affichage de la couverture avec CSS3. L'affichage de couverture d'image peut être utilisé dans de nombreuses situations, telles que les pages d'affichage de produits, etc.

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

Copier après la connexion

Ce sont toutes les utilisations de l'animation présentées sur la photo de couverture. Pour un contenu plus passionnant, veuillez prêter attention au site Web chinois php autres articles liés !

Lecture connexe :

Quels sont les nouveaux attributs d'arrière-plan en CSS3

Quels sont les standards du Web en HTML

Comment créer une mise en page réactive avec CSS3

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!