动画综合运用

Animation

实验题目
动画设计
实验目的
掌握过渡动画 transition 的基本使用
掌握帧动画的定义 @keyframes
掌握帧动画的使用 animation
实验内容

在个人网站的基础上开发并完善,实现以下内容:

鼠标悬停动画 :hover

. 按钮设计:纯色/渐变背景变化

. 侧边导航:导航固定定位在页面中间;静态时折叠;鼠标hover时展开

. 水平滑动导航:导航元素hover时,背景条移动一定数量的距离

. 垂直滑动导航:静态时显示图标;鼠标hover时图标移出,文字移入

获取焦点动画 :focus

. 单行输入获取焦点时,边框、字体、背景等属性发送变化

选中动画 :checked

. 定制单选按钮 radio

. 定制多选按钮 checkbox

进度条

. 线性变换 linear

. 步进变换 steps()

页面动画

. 先定位各元素在容器外面,然后添加动画,采用不同的延迟依次移入

页面跳转* – 动画事件运用
参考效果和参考代码
按钮设计
水平滑动菜单、垂直滑动菜单
单行输入
留言板
定制单选按钮、定制多选按钮
进度条
页面动画
首页设计
侧边滑动菜单
下划线动画
拓展与思考
使用变换实现侧边导航
如何使用事件控制动画