详谈CSS的flex布局(图文介绍)_css教程
flex模型的布局方式十分的简洁,而是使用的范围比较广;拥有比较多的属性,接下来我们就详细介绍各种属性对布局的改变。
实现思路:
(推荐学习:css快速入门)
准备相同大小的多个图片
将要展示图片横排放在一个图片容器里面
在图片容器外再加一个展示容器,展示容器大小为图片大小
给图片容器添加自定义动画,在动画不同阶段设置递增的偏移值
注意事项:
动画效果分为切换和停留两部分
自定义动画阶段与图片数量相关
动画各阶段偏移值与图片大小相关
css如何垂直对齐容器中的元素_css教程
css实现垂直对齐容器中的元素的方法是:可以用过css3的Transform来实现。具体代码为:【-webkit-transform: translateY(-50%);transform: translateY(-50%);】。
本文中示例最后一个图片到第一个图片没有切换效果,一个思路是可以由最后一个图片再挨个切换到第一个图片
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实现图片轮播的详细内容,更多请关注ki4网其它相关文章!
css伪类选择器介绍_css教程
css快速入门:本文为大家介绍了css伪类选择器的相关知识,具有一定的参考价值,希望可以帮助到大家。a:link表示未访问的链接状态;a:hover表示鼠标放在链接上的状态。