Maison > Article > interface Web > Comment créer un effet d'animation de changement de diapositive en CSS3

Comment créer un effet d'animation de changement de diapositive en CSS3

php中世界最好的语言original: 2017-11-24 13:45:352862parcourir

Cette fois, je vais vous apprendre à utiliser CSS3 pour créer un effet d'animation de changement de diapositive L'effet d'animation de changement de diapositive peut être utilisé dans de nombreuses situations. Aujourd'hui, je vais vous donner un diaporama. exemples de cas d'opération d'effet d'animation de changement

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>html5 幻灯片切换动画</title>
 
      <link rel="stylesheet" href="css/style.css">
 
 
</head>
 
<body>
 
<div>
  <!-- slider start -->
  <div class="fnc-slider example-slider">
    <div>
      <!-- slide start -->
      <div class="fnc-slide m--blend-green m--active-slide">
        <div>
          <div>
            <div></div>
          </div>
          <div>
            <h2>
              <div>
                <span>Black</span>
              </div>
              <div>
                <span>Widow</span>
              </div>
            </h2>
            <button type="button">
              Credits
              <span data-text="Credits">Credits</span>
            </button>
          </div>
        </div>
      </div>
      <!-- slide end -->
      <!-- slide start -->
      <div class="fnc-slide m--blend-dark">
        <div>
          <div>
            <div></div>
          </div>
          <div>
            <h2>
              <div>
                <span>Captain</span>
              </div>
              <div>
                <span>America</span>
              </div>
            </h2>
            <button type="button">
              Credits
              <span data-text="Credits">Credits</span>
            </button>
          </div>
        </div>
      </div>
      <!-- slide end -->
      <!-- slide start -->
      <div class="fnc-slide m--blend-red">
        <div>
          <div>
            <div></div>
          </div>
          <div>
            <h2>
              <div>
                <span>Iron</span>
              </div>
              <div>
                <span>Man</span>
              </div>
            </h2>
            <button type="button">
              Credits
              <span data-text="Credits">Credits</span>
            </button>
          </div>
        </div>
      </div>
      <!-- slide end -->
      <!-- slide start -->
      <div class="fnc-slide m--blend-blue">
        <div>
          <div>
            <div></div>
          </div>
          <div>
            <h2>
              <div>
                <span>Thor</span>
              </div>
              <div>
                <span>Just Thor</span>
              </div>
            </h2>
            <button type="button">
              Credits
              <span data-text="Credits">Credits</span>
            </button>
          </div>
        </div>
      </div>
      <!-- slide end -->
    </div>
    <nav>
      <div>
        <div class="fnc-navbg m--navbg-green m--active-nav-bg"></div>
        <div class="fnc-navbg m--navbg-dark"></div>
        <div class="fnc-navbg m--navbg-red"></div>
        <div class="fnc-navbg m--navbg-blue"></div>
      </div>
      <div>
        <button>
          Black Widow
          <span></span>
        </button>
        <button>
          Captain America
          <span></span>
        </button>
        <button>
          Iron Man
          <span></span>
        </button>
        <button>
          Thor
          <span></span>
        </button>
      </div>
    </nav>
  </div>
  <!-- slider end -->
  <div>
    <div></div>
    <h2>Made by</h2>
    <img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/142996/profile/profile-512_5.jpg" alt="" />
    <h3>Nikolay Talanov</h3>
    <a href="http://codepen.io/suez/" target="_blank">My codepen</a>
    <a href="https://twitter.com/NikolayTalanov" target="_blank">My twitter</a>
    <h2>Based on</h2>
    <a href="https://dribbble.com/shots/2375246-Fashion-Butique-slider-animation" target="_blank">Concept by Kreativa Studio</a>
    <h4>Global Blend Mode</h4>
    <div>
      <input type="checkbox" class="colorful-switchcheckbox js-activate-global-blending" id="colorful-switch-cb" />
      <label for="colorful-switch-cb">
        <span></span>
        <span></span>
        <span>
          <span></span>
        </span>
        <span></span>
      </label>
    </div>
  </div>
</div>
 
    <script src="js/index.js"></script>
 
</body>
</html>

Il existe de nombreux cas de changement d'effet d'animation dans les diapositives, je pense que tout le monde en tirera des leçons après l'avoir lu. Pour un contenu plus passionnant, veuillez prêter attention aux autres cas connexes. articles sur le site PHP chinois !

Lecture connexe :

Comment créer l'effet de fermeture et d'ouverture de la porte en CSS3

Comment utiliser les propriétés d'animation CSS3

Comment utiliser CSS3 box-shadow

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment créer des effets spéciaux de commutation d'image de mise au point plein écran adaptatifs CSS3Article suivant：Comment créer des effets spéciaux de commutation d'image de mise au point plein écran adaptatifs CSS3

Articles Liés

Voir plus