这篇文章将为大家详细讲解有关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进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
