HTML+CSS项目实践一：单纯利用CSS制作图片轮播效果（不使用JS）

知识点：CSS3 animation 属性、CSS3 @keyframes 规则

实现效果：3张图片进行轮播显示

 

制作思路：

1、制作一个展示动画效果的盒子，这个盒子里会一次展示3张图片。因此展示盒子和3张图片的宽高要设置一样。

2、把3张图片横向排列在一个图片盒子里，使用float属性，控制定位。

3、给图片盒子添加自定义动画，控制在不同时间段，展示不同的图片。（通过margin-left属性来控制展示的位置）

关键属性：

1、animation 属性是一个简写属性，用于设置六个动画属性。（本例中设置了4个属性）

2、@keyframes规则是用来创建动画的。使用方法：@keyframes 动画名称{ };

 

实现代码：