怎样应用纯css实现图片轮播
发布时间:09/01 来源:未知 浏览:
关键词:
实现思绪:
(引荐学习:css快速入门)
预备雷同大小的多个图片
将要展现图片横排放在一个图片容器里面
在图片容器外再加一个展现容器,展现容器大小为图片大小
给图片容器增加自定义动画,在动画不一样阶段设定递增的偏移值
留意事项:
动画结果分为切换和逗留两部分
自定义动画阶段与图片数目相关
动画各阶段偏移值与图片大小相关
本文中示例最后一个图片到第一个图片没有切换结果,一个思绪是可以由最后一个图片再受个切换到第一个图片
HTML代码:
<div id="container"> <div id="photo"> <img src="1.png" /> <img src="2.png" /> <img src="3.png" /> </div> </div>
代码解析:
这里创立了三个 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实现图片轮播的具体内容,更多请关注百分百源码网其它相关文章!