在本教程中,我们将构建一个动画图片堆栈,这将使用各种花哨的效果之间的过渡的一组图像。实现纯使用CSS3效果,这意味着他们在现代浏览器和移动设备平稳运行。我们还将使这张照片栈自动前进,所以你可以使用它作为一个幻灯片。 HTML 像往常一样,第一步是现在的标记的例子。我们开始定期HTML5文档,我们包括一些CSS / JS文件: index.html<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Animated CSS3 Photo Stack | Tutorialzine Demo</title> <!-- CSS Includes --> <link href="assets/css/style.css" rel="stylesheet" /> <link href="assets/css/animate.css" rel="stylesheet" /> </head> <body> <ul id="photos"> <li><a href="http://www.flickr.com/photos/brockwhittaker/8500935165/" style="background-image:url(...)">Landscape 5</a></li> <!-- More photos here --> </ul> <a href="#" class="arrow previous"></a> <a href="#" class="arrow next"></a> <!-- Libraries --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="assets/js/script.js"></script> </body> </html>对于每一个照片,我用一个锚元素定义了一个李项。的图像设置为有背景图像属性链接。正如您将看到的CSS部分,我用background-size属性迫使图像覆盖整个宽度和高度的链接。当添加更多的照片,请记住,因为它们绝对定位,他们将以相反的顺序(最后一个图将在顶部)。 JavaScript 触发动画库给我们的影响,我们必须指定一个类名与动画的名称的元素。我们还必须移动动画图片底部的堆栈动画结束后,这样我们可以显示下一个形象。这是我们需要做的为了让这个例子: 首先,我们将监听单击箭头; 然后,单击下箭头出现时,我们将触发一个随机选择的CSS assigni动画 assets/js/script.js$(function() { var exits = ['fadeOut', 'fadeOutDown', 'fadeOutUpBig', 'bounceOut', 'bounceOutDown', 'hinge', 'bounceOutUp', 'bounceOutLeft', 'rotateOut', 'rotateOutUpLeft', 'lightSpeedOut', 'rollOut']; var entrances = ['fadeIn', 'fadeInDown', 'fadeInRight', 'bounceIn', 'bounceInRight', 'rotateIn', 'rotateInDownLeft', 'lightSpeedIn', 'rollIn', 'bounceInDown']; var photos = $('#photos'), ignoreClicks = false; $('.arrow').click(function(e, simulated){ if(ignoreClicks){ // If clicks on the arrows should be ignored, // stop the event from triggering the rest // of the handlers我没有使用所有动画的效果。css提供,但你可以找到在github完整列表页面。 剩下,我们正在做的,是编写一些CSS样式。 CSs 我不会显示所有的风格在这里,只有那些照片直接负责的堆栈 assets/css/styles.css#photos{ margin:0 auto; padding-top:120px; width:450px; position:relative; } #photos li{ position:absolute; width:450px; height:450px; overflow:hidden; background-color:#fff; box-shadow: 1px 1px 1px #ccc; z-index:10; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; animation-duration: 1s; } #photos li a{ position:absolute; top:6px; left:6px; right:6px; bottom:6px; background-size: cover; text-indent:-9999px; overflow:hidden; }改变动画的持续时间,你必须提供animation-duration财产。在上面的片段中,我已经将其设置为1秒。更多的属性,您可以设置animation-delay延迟触发动画之前,和animation-iteration-count重复的数量。 完成了! 这个我们的动画图片烟囱效应完成!您可以使用这个例子作为一个轻量级的幻灯片,甚至在移动设备上工作顺利。
