WEB前端教程：使用 animate.css 实现一个优雅的登录框 - 好学星城学习论坛

page contents

WEB前端教程：使用 animate.css 实现一个优雅的登录框

深度理解掌握 transition-timing-function 以及它的意义

课程目标

深度理解掌握 transition-timing-function 以及它的意义
配合 CSS transform 和 CSS transition 制作交互动效
通过 jQuery 判断并控制动画的触发条件
接触并使用 animate.css 开源库

阅读

编码

观看视频 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
阅读 ( 344 )
分类：WEB前端开发

作家榜 »

轩辕小不懂 2403 文章
小柒 1478 文章
Pack 1135 文章
Nen 576 文章
王昭君 209 文章
文双 71 文章
小威 64 文章
Cara 36 文章