WEB前端教程：利用 CSS animation 制作一个炫酷的 Slider
学习 CSS animation keyframes,理解动画中关键帧 的概念
课程目标
- 学习 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 中的图片资源都是我的猫：） 学前端是有好处的，可以为你的宠物制作一个在线展示页面
更多相关技术内容咨询欢迎前往并持续关注六星社区了解详情。
长按或扫描下方二维码，免费获取 Python公开课和大佬打包整理的几百G的学习资料，内容包含但不限于Python电子书、教程、项目接单、源码等等
- 发表于 2022-10-31 16:13
- 阅读 ( 413 )
- 分类：WEB前端开发
