首页 > 文章 > web前端 > css3怎么做幻灯片切换动画效果

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

php中世界最好的语言原创: 2017-11-24 13:45:352876浏览

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

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

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