利用CSS关键帧实现轮播图效果动画
最近梳理css的动画效果的时候，想到了原来学css的时候，有个好玩的轮播图效果，当时用的js写好的轮子，然后网上到处找，这次换自己来写一个css简单的轮播吧，给才接触的童鞋参考一下。
关键css技术：css的animation动画属性，@keyframes 关键帧
简单思路就是：
两个div，一个父div，一个子div，父div作为展示窗口，子div作为图片容器存放图片，设置浮动使得子div中图片依次在容器中横向排列，父div的宽高设置和图片一致，然后overflow:hidden把超出部分隐藏，用animation设置和@keyframes配置依据实际情况下调整就可以了。
这里不多废话了，直接上代码：
<!DOCTYPE html><html><head><meta charset="utf-8"><title>css关键帧实现简单轮播图动画</title><style type="text/css">*{margin: 0;padding: 0;background-color: #A9A9A9;}ul li{list-style: none;}#box{width: 1202px;height: 676px;margin: 0 auto;margin-top: 100px;overflow: hidden;}.content{width: 7212px;margin: 0 auto;animation: test 10s;}img{width: 1202px;height: 676px;float: left;}@-webkit-keyframes test{0%,15%{margin-left: 0;}18%,32%{margin-left: -1202px;}35%,49%{margin-left: -2404px;}52%,64%{margin-left: -3606px;}67%,81%{margin-left: -4808px;}84%,100%{margin-left: -6010px;}} </style></head><body><div id="box"><ul class="content"><li><img src="../img/2.jpg" ></li><li><img src="../img/3.jpg" ></li><li><img src="../img/4.jpg" ></li><li><img src="../img/9.jpg" ></li><li><img src="../img/10.jpg" ></li><li><img src="../img/12.jpg" ></li></ul></div></body></html>
最后的效果如下：
大家有什么需要讨论的请评论留言哦！！！
