利用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>
最后的效果如下:
大家有什么需要讨论的请评论留言哦!!!
如果觉得《仅仅CSS就实现了轮播图----利用关键帧动画实现轮播图效果》对你有帮助,请点赞、收藏,并留下你的观点哦!