最外部盒子的css样式 .box1{ width:722px; height:358px; margin:0 auto; overflow: hidden; }
这里的容器就是最外部的盒子
注意最外部盒子设置宽高时要与我们进行展示的图片的宽高保持一致，这样就可以保证一次轮播一张图片
放置所有的图片的容器的样式的设置 这里为了让所有的图片在一行显示如上图所示，需要给盒子足够的宽， .box{ width:2200px; height:352px; }
CSS 动画用于实现元素从一个 CSS 样式配置转换到另一个 CSS 样式配置。
动画包括两个部分：描述动画的样式规则和用于指定动画开始，结束以及中间
渐变实现轮播图：
渐变实现轮播图相对来说比较简单，这里是把图片叠放在一个盒子里让上面的图片颜色渐渐变淡下面的图片显示出来，这里我把图片放进了样式里面这是一种比较取巧的方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>轮播图</title> </head> <!-- style 里面是css样式 因为代码较少就没有再次创建 --> <style> /* 盒子1的样式 */ .focus{ margin:0 auto; width: 700px; height: 322px; animation: focus 20s infinite; } @keyframes focus { 0%{ background-image: url("./images/img.jpg"); } 50%{ background-image: url("./images/img2.jpg"); } 100%{ background-image: url("./images/img3.jpg"); } } </style> <body> <div class="focus"> </div> </body> </html>
