css3怎么做幻灯片切换动画效果

这次教大家的是怎样用CSS3做出幻灯片的切换动画效果，幻灯片的切换动画效果在很多情况下都可以用得到，今天就给大家一份幻灯片的切换动画效果的操作案例

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>html5 幻灯片切换动画</title>
 
      <link rel="stylesheet" href="css/style.css">
 
 
</head>
 
<body>
 
<p>
  <!-- slider start -->
  <p class="fnc-slider example-slider">
    <p>
      <!-- slide start -->
      <p class="fnc-slide m--blend-green m--active-slide">
        <p>
          <p>
            <p></p>
          </p>
          <p>
            <h2>
              <p>
                <span>Black</span>
              </p>
              <p>
                <span>Widow</span>
              </p>
            </h2>
            <button type="button">
              Credits
              <span data-text="Credits">Credits</span>
            </button>
          </p>
        </p>
      </p>
      <!-- slide end -->
      <!-- slide start -->
      <p class="fnc-slide m--blend-dark">
        <p>
          <p>
            <p></p>
          </p>
          <p>
            <h2>
              <p>
                <span>Captain</span>
              </p>
              <p>
                <span>America</span>
              </p>
            </h2>
            <button type="button">
              Credits
              <span data-text="Credits">Credits</span>
            </button>
          </p>
        </p>
      </p>
      <!-- slide end -->
      <!-- slide start -->
      <p class="fnc-slide m--blend-red">
        <p>
          <p>
            <p></p>
          </p>
          <p>
            <h2>
              <p>
                <span>Iron</span>
              </p>
              <p>
                <span>Man</span>
              </p>
            </h2>
            <button type="button">
              Credits
              <span data-text="Credits">Credits</span>
            </button>
          </p>
        </p>
      </p>
      <!-- slide end -->
      <!-- slide start -->
      <p class="fnc-slide m--blend-blue">
        <p>
          <p>
            <p></p>
          </p>
          <p>
            <h2>
              <p>
                <span>Thor</span>
              </p>
              <p>
                <span>Just Thor</span>
              </p>
            </h2>
            <button type="button">
              Credits
              <span data-text="Credits">Credits</span>
            </button>
          </p>
        </p>
      </p>
      <!-- slide end -->
    </p>
    <nav>
      <p>
        <p class="fnc-navbg m--navbg-green m--active-nav-bg"></p>
        <p class="fnc-navbg m--navbg-dark"></p>
        <p class="fnc-navbg m--navbg-red"></p>
        <p class="fnc-navbg m--navbg-blue"></p>
      </p>
      <p>
        <button>
          Black Widow
          <span></span>
        </button>
        <button>
          Captain America
          <span></span>
        </button>
        <button>
          Iron Man
          <span></span>
        </button>
        <button>
          Thor
          <span></span>
        </button>
      </p>
    </nav>
  </p>
  <!-- slider end -->
  <p>
    <p></p>
    <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>
    <p>
      <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>
    </p>
  </p>
</p>
 
    <script src="js/index.js"></script>
 
</body>
</html>

幻灯片的切换动画效果案例就是这么多，相信大家看了以后也有所收货，更多精彩请关注其它相关文章！

相关文章：

你感兴趣的文章：

标签云：