css3怎麼做投影片切換動畫效果

最後更新：2017-11-24 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

這次教大家的是怎樣用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中文網其它相關文章！

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More