溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關CSS3如何制作幻燈片切換動畫，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
<!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <title>html5 幻燈片切換動畫</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="demo-cont"> <!-- slider start --> <div class="fnc-slider example-slider"> <div class="fnc-slider__slides"> <!-- slide start --> <div class="fnc-slide m--blend-green m--active-slide"> <div class="fnc-slide__inner"> <div class="fnc-slide__mask"> <div class="fnc-slide__mask-inner"></div> </div> <div class="fnc-slide__content"> <h3 class="fnc-slide__heading"> <div class="fnc-slide__heading-line"> <span>Black</span> </div> <div class="fnc-slide__heading-line"> <span>Widow</span> </div> </h3> <button type="button" class="fnc-slide__action-btn"> Credits <span data-text="Credits">Credits</span> </button> </div> </div> </div> <!-- slide end --> <!-- slide start --> <div class="fnc-slide m--blend-dark"> <div class="fnc-slide__inner"> <div class="fnc-slide__mask"> <div class="fnc-slide__mask-inner"></div> </div> <div class="fnc-slide__content"> <h3 class="fnc-slide__heading"> <div class="fnc-slide__heading-line"> <span>Captain</span> </div> <div class="fnc-slide__heading-line"> <span>America</span> </div> </h3> <button type="button" class="fnc-slide__action-btn"> Credits <span data-text="Credits">Credits</span> </button> </div> </div> </div> <!-- slide end --> <!-- slide start --> <div class="fnc-slide m--blend-red"> <div class="fnc-slide__inner"> <div class="fnc-slide__mask"> <div class="fnc-slide__mask-inner"></div> </div> <div class="fnc-slide__content"> <h3 class="fnc-slide__heading"> <div class="fnc-slide__heading-line"> <span>Iron</span> </div> <div class="fnc-slide__heading-line"> <span>Man</span> </div> </h3> <button type="button" class="fnc-slide__action-btn"> Credits <span data-text="Credits">Credits</span> </button> </div> </div> </div> <!-- slide end --> <!-- slide start --> <div class="fnc-slide m--blend-blue"> <div class="fnc-slide__inner"> <div class="fnc-slide__mask"> <div class="fnc-slide__mask-inner"></div> </div> <div class="fnc-slide__content"> <h3 class="fnc-slide__heading"> <div class="fnc-slide__heading-line"> <span>Thor</span> </div> <div class="fnc-slide__heading-line"> <span>Just Thor</span> </div> </h3> <button type="button" class="fnc-slide__action-btn"> Credits <span data-text="Credits">Credits</span> </button> </div> </div> </div> <!-- slide end --> </div> <nav class="fnc-nav"> <div class="fnc-nav__bgs"> <div class="fnc-nav__bg m--navbg-green m--active-nav-bg"></div> <div class="fnc-nav__bg m--navbg-dark"></div> <div class="fnc-nav__bg m--navbg-red"></div> <div class="fnc-nav__bg m--navbg-blue"></div> </div> <div class="fnc-nav__controls"> <button class="fnc-nav__control"> Black Widow <span class="fnc-nav__control-progress"></span> </button> <button class="fnc-nav__control"> Captain America <span class="fnc-nav__control-progress"></span> </button> <button class="fnc-nav__control"> Iron Man <span class="fnc-nav__control-progress"></span> </button> <button class="fnc-nav__control"> Thor <span class="fnc-nav__control-progress"></span> </button> </div> </nav> </div> <!-- slider end --> <div class="demo-cont__credits"> <div class="demo-cont__credits-close"></div> <h3 class="demo-cont__credits-heading">Made by</h3> <img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/142996/profile/profile-512_5.jpg" alt="" class="demo-cont__credits-img" /> <h4 class="demo-cont__credits-name">Nikolay Talanov</h4> <a href="http://codepen.io/suez/" target="_blank" class="demo-cont__credits-link">My codepen</a> <a href="https://twitter.com/NikolayTalanov" target="_blank" class="demo-cont__credits-link">My twitter</a> <h3 class="demo-cont__credits-heading">Based on</h3> <a href="https://dribbble.com/shots/2375246-Fashion-Butique-slider-animation" target="_blank" class="demo-cont__credits-link">Concept by Kreativa Studio</a> <h5 class="demo-cont__credits-blend">Global Blend Mode</h5> <div class="colorful-switch"> <input type="checkbox" class="colorful-switch__checkbox js-activate-global-blending" id="colorful-switch-cb" /> <label class="colorful-switch__label" for="colorful-switch-cb"> <span class="colorful-switch__bg"></span> <span class="colorful-switch__dot"></span> <span class="colorful-switch__on"> <span class="colorful-switch__on__inner"></span> </span> <span class="colorful-switch__off"></span> </label> </div> </div> </div> <script src="js/index.js"></script> </body> </html>
關于“CSS3如何制作幻燈片切換動畫”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
