轮播图在电商方面应用的非常广泛，那么该如何去写呢？接下来我们就看一下制作轮播图（bannner）的详细方法。
所谓轮播图就是将n张图面进行一个移动切换;
废话不多说上代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style> .banner { width: 500px; height: 300px; overflow: hidden; } .box { width: 400%; height: 300px; animation: banner 5s infinite; } .box img { width: 25%; height: 300px; float: top; } @keyframes banner { 0% { margin-left: 0px; } 33.3% { margin-left: -100%; } 66.6% { margin-left: -200%; } 100% { margin-left: -300%; } } </style> </head> <body> <div class="banner"> <div class="box"> <img src="41c406dcb2f628db97bc64bf84c6e906_38bf42ad37a6eba0b927e10e8d544ac498e9c4c0.jpg" alt=""> <img src="41c406dcb2f628db97bc64bf84c6e906_38bf42ad37a6eba0b927e10e8d544ac498e9c4c0.jpg" alt=""> <img src="41c406dcb2f628db97bc64bf84c6e906_38bf42ad37a6eba0b927e10e8d544ac498e9c4c0.jpg" alt=""> <img src="41c406dcb2f628db97bc64bf84c6e906_38bf42ad37a6eba0b927e10e8d544ac498e9c4c0.jpg" alt=""> </div> </div> <!-- 动画： animation: 名称 过渡时间 方式 次数 开始时间; 名称 要和规则的名称一致 过渡时间 一次动画所用到的时间 s 方式 linear 平缓 ease 默认，慢 - 快 - 慢 次数 数字 或 infinite无限的 开始时间 几秒后开始 s 规则 @keyframes 名称{ from{ 开始时的样式 } to{ 结束时的样式 } } @keyframes box{ 0%{ } 25%{ } 50%{ } 75%{ } 100%{ } } --> </body> </html>
css的轮播图动画呢是自动轮播他的原理也很简单 他主要就是animation和keyframes ，transform:translate();的应用
