怎样应用纯css实现图片轮播
发布时间:09/01 来源:未知 浏览:
关键词:
代码解析:
这里新建了三个 img 元素,img 元素外面是图片容器,图片容器外面是展现容器。
css代码:
#container { width: 400px; height: 300px; overflow: hidden; } #photo { width: 1200px; animation: switch 5s ease-out infinite; } #photo > img { float: left; width: 400px; height: 300px; } @keyframes switch { 0%, 25% { margin-left: 0; } 35%, 60% { margin-left: -400px; } 70%, 100% { margin-left: -800px; } }
代码解析:
展现容器大小和图片大小一致
图片增加 float 结果,不消考虑费事的 margin 题目
因为示例只要三个图片,所以增加了三个动画阶段,每一阶段都是通过设定递增的 margin-left 值达到切换的结果
设定的动画阶段(如:35%~60%)是动画停顿局部,和上一阶段空余工夫(如25%~35%)即为动画切换局部,各局部工夫长短需要本人把控
以上就是怎样应用纯css实现图片轮播的细致内容,更多请关注 百分百源码网 其它相干文章!