Maison >interface Web >tutoriel CSS >Comment créer un effet d'animation de changement de diapositive en CSS3
Comment créer un effet d'animation de changement de diapositive en CSS3
- php中世界最好的语言original
- 2017-11-24 13:45:352928parcourir
Cette fois, je vais vous apprendre à utiliser CSS3 pour créer un effet d'animation de changement de diapositive L'effet d'animation de changement de diapositive peut être utilisé dans de nombreuses situations. Aujourd'hui, je vais vous donner un diaporama. exemples de cas d'opération d'effet d'animation de changement
<!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>Il existe de nombreux cas de changement d'effet d'animation dans les diapositives, je pense que tout le monde en tirera des leçons après l'avoir lu. Pour un contenu plus passionnant, veuillez prêter attention aux autres cas connexes. articles sur le site PHP chinois !
Lecture connexe :
Comment créer l'effet de fermeture et d'ouverture de la porte en CSS3
Comment utiliser les propriétés d'animation CSS3
Comment utiliser CSS3 box-shadow
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!