Comment créer un effet d'animation de changement de diapositive en CSS3-tutoriel CSS-php.cn

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

php中世界最好的语言

Libérer： 2017-11-24 13:45:35

original

2885 Les gens l'ont consulté

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>

Copier après la connexion

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!