超级会员免费看
本文介绍如何仅使用CSS3的animation属性和@keyframes规则创建一个3张图片轮播效果。通过设置盒模型、float属性及margin-left动画，避免JavaScript实现。详细解析了animation属性和关键帧规则，并提供了实现代码。最后提出挑战，制作垂直方向的图片轮播，补充介绍了animation的更多属性和transition-timing-function属性。
知识点：CSS3 animation 属性、CSS3 @keyframes 规则
实现效果：3张图片进行轮播显示
制作思路：
1、制作一个展示动画效果的盒子，这个盒子里会一次展示3张图片。因此展示盒子和3张图片的宽高要设置一样。
2、把3张图片横向排列在一个图片盒子里，使用float属性，控制定位。
3、给图片盒子添加自定义动画，控制在不同时间段，展示不同的图片。（通过margin-left属性来控制展示的位置）
关键属性：
1、animation 属性是一个简写属性，用于设置六个动画属性。（本例中设置了4个属性）
2、@keyframes规则是用来创建动画的。使用方法：@keyframes 动画名称{ };
实现代码：
订阅专栏 解锁全文
扫一扫
1660
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
