1.前言css3动画效果的强大之处不言而喻。自出现以来，人气一直不减。它和js动画的优劣一直是前端圈争论不休的话题，毫无疑问，css3动画的出现在一定程度上降低了动画效果的实现难度，有利于前端学习，其精简的代码量将我们从烦人的JS调试中解放出来。当然，CSS动画效果有其局限性，我们不能只用css3来模拟所有动画，另外就是浏览器兼容性问题。本次我们使用css3实现轮播图片效果，体验css3的强大。首先我们只能实现自动旋转，效果就是最常见的淡入淡出，点击旋转效果还没有实现。至少在我现在的水平上，纯css3只能选择自动旋转和点击旋转其中之一，如果有办法同时达到两种效果，请告诉我。2.布局>html代码没什么好说的。在款式上，首先滑块的大盒子一定要相对定位。另外，我们在li标签中加入了background-image，因为这样就可以用纯css来实现响应式了。此外，背景图片必须使用background-size:100%才能在响应中看到全图。另一个是身高问题。显然，slider-container必须和li的高度保持一致，因为在响应式风格中，高度是无法固定的，所以使用height属性显然是不行的。padding属性可以解决这个问题。一个是background-image可以显示在padding中，另一个是padding的单位是根据父元素的宽度来的。的。*{保证金：0;padding:0;}ul,li{list-style:none;}.floatfix{*zoom:1;}.floatfix:after{content:"";显示：表格；清除：两者；}.slider-contaner{宽度：100%；位置：相对；}.slider,.slider-item{padding-bottom:40%;}.slider-item{width:100%;位置：绝对；%;}.slider-item1{background-image:url(imgs/1.jpg);}.slider-item2{background-image:url(imgs/2.jpg);}.slider-item3{background-image:url(imgs/3.jpg);}.slider-item4{background-image:url(imgs/4.jpg);}.slider-item5{background-image:url(imgs/5.jpg);}三、要设计动画淡入淡出效果，必须使用不透明度。首先，所有图片的淡入淡出都是同一个动画，只是时间不同。这必须由动画延迟来控制。动画的无限旋转必须使用animation-iteration-count:infinite，我们这次有5张图片，整个动画分为图片停留和淡入淡出两种效果，如下图所示，箭头表示淡入淡出的过程。因为css3中没有规定两个动画的时间间隔的属性，所以我们必须写其他图片淡入淡出进入动画时的图片效果。显然这个时候是opacity:0;为了方便写动画，animation使用了一个线性函数，即animation-timing-function:linear;整个过程20s，停留3秒，淡入淡出1s，换算成15%和5%的百分比；@keyframesfade{0%{不透明度：0；z-index:2;}5%{不透明度:1;z-index:1;}20%{不透明度:1;z-index:1;}25%{不透明度:0;z-index:0;}100%{不透明度:0;z-index:0;}}接下来就是为每张图片添加animation-delay，因为第一张图片必须显示在最上面，所以其他通过相邻兄弟选择器使用opacity:0，第一张图片没有开头需要淡入淡出，直接跳到stop，也就是5%，所以animation-delay是-1s，第二章图和第一张图相隔20%，也就是4s，animation-delay为3s，依此类推。slider-item+.slider-item{opacity:0;}.slider-item1{animation-delay:-1s;}.slider-item2{animation-delay:3s;}。slider-item3{animation-delay:7s;}.slider-item4{animation-delay:11s;}.slider-item5{animation-delay:15s;}这时候我们的轮播图就可以动了4.添加轮播焦点添加carousel当然重点不是为了点击，而是告诉访问者这里有多少张图片，以及图片当前的位置。至少对我个人而言，轮播的焦点是非常重要的，因为如果我不知道轮播中有多少张图片，我就会没有办法去点击，我会变得很焦躁，感觉自己没有看到整个网页的全貌。所以让我们添加一个旋转木马焦点。首先很明确，上面的动画还是可以用的。此外，布局必须使用position:absolute。另外，很明显我们要把焦点写两次，一次是当前图片的样式，一次是非当前图片的样式
