WEB前端教程：使用 animate.css 实现一个优雅的登录框
深度理解掌握 transition-timing-function 以及它的意义
课程目标
- 深度理解掌握 transition-timing-function 以及它的意义
- 配合 CSS transform 和 CSS transition 制作交互动效
- 通过 jQuery 判断并控制动画的触发条件
- 接触并使用 animate.css 开源库
阅读
- Animate.css 一款强大的预设 CSS3 动画库(opens new window)
- CSS3 贝塞尔曲线工具(opens new window)
- CSS3 过渡(opens new window)
- CSS3 变形(opens new window)
- CSS Transforms Module(opens new window)
- CSS3 中的变形 transform 详解(opens new window)
编码
观看视频 demo (opens new window)中的交互动效，在我们提供给你的 HTML 文件 (opens new window)基础上，适当的添加 CSS transition 和 CSS transform 属性，实现视频 demo 中的效果。
- 通过 jQuery 判断输入框是否有内容，如果 Email 和 Password 都填充了内容，为 Submit 按钮添加动画让它变得引人注目
- 当输入框 出于 focus 状态的时候，Label 要变小并退到上面去
- 研究一下为自己的 transition 添加什么样的 transition-timing-function 会让效果更流畅
- 要求使用动画开源库 (opens new window)制作按钮的动画
要求
- 注意各项属性在不同浏览器中的兼容性
- 请注意代码风格的整齐、优雅
- HTML 及 CSS 代码结构清晰、规范
- 代码中含有必要的注释
更多相关技术内容咨询欢迎前往并持续关注六星社区了解详情。
长按或扫描下方二维码，免费获取 Python公开课和大佬打包整理的几百G的学习资料，内容包含但不限于Python电子书、教程、项目接单、源码等等
- 发表于 2022-10-31 16:16
- 阅读 ( 462 )
- 分类：WEB前端开发
