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

2020-11-27 来源：爱够旅游网

这次教大家的是怎样用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>

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

全部栏目

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