利用 CSS animation 制作一个炫酷的 Slider

课程目标

• 学习 CSS animation keyframes
• 理解动画中 关键帧 的概念
• 掌握 CSS transform 3D 变形

阅读

• CSS3 animation 属性 (opens new window)
• CSS3 @keyframes 规则 (opens new window)
• 动效落地方法-标注 (opens new window)
• CSS3 过渡 (opens new window)
• CSS3 变形 (opens new window)
• CSS Transforms Module (opens new window)
• CSS3 中的变形 transform 详解 (opens new window)
• CodePen 优秀动画示例 (opens new window)

编码

观看视频 demo (opens new window)中的效果，通过纯 CSS 实现一个立方体翻转的效果。

• hover 的时候， 立方体绕着「通过其中心的纵轴」旋转
• 主区域照片全屏显示，通过底部的缩略图来控制不同的图片切入画面
• 借助我们提供给你的动效标注 (opens new window)，百分百还原该动效

要求

• 注意 CSS animation 属性在不同浏览器中的兼容性
• 请注意代码风格的整齐、优雅
• HTML 及 CSS 代码结构清晰、规范
• 代码中含有必要的注释

作者有话说

Slider 中的图片资源都是我的猫：） 学前端是有好处的，可以为你的宠物制作一个在线展示页面