Home > Article > Web Front-end > How to create slide switching animation effect in css3
How to create slide switching animation effect in css3
- php中世界最好的语言Original
- 2017-11-24 13:45:352861browse
This time I will teach you how to use CSS3 to make a slide transition. Animation effect. The slide transition animation effect can be used in many situations. Today I will give you a slideshow. Operation cases of switching animation effects
<!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>There are so many cases of switching animation effects of slides. I believe everyone will learn something after reading it. For more exciting information, please pay attention to other related articles on the PHP Chinese website!
Related reading:
How to create the effect of closing and opening doors in CSS3
How to use Css3 animation properties
The above is the detailed content of How to create slide switching animation effect in css3. For more information, please follow other related articles on the PHP Chinese website!