关键帧动画_弹性盒子与媒体查询

day0527关键帧动画、弹性盒子与媒体查询

1.关键帧动画简介

2.关键帧与动画属性

3.关键帧动画设置步骤

4.弹性盒子

5.媒体查询

一.关键帧动画

1.定义与作用：指的是通过给元素设置一系列的动作来完成的一个动态效果，增强用户体验

2.实现步骤

(1)设置元素或标签的样式

(2)定义关键帧键帧动画

(3)将定义好的关键帧键动画绑定到标签上

二.弹性盒子flex

1.定义与作用

指的是能够更灵活地设计网页的结构与布局的一种技术，其名称为flex

2.使用格式

.mydiv{

/将元素转换为弹性盒子，之后就可以使用弹性盒子的属性/

display:flex;

}

3.弹性盒子的属性

父盒子：display:flex

​ flex-direction:row/column;

​ align-items: flex-start/flex-end;

​ justfity-content: flex-start/flex-end;

子盒子:

​ 占比: flex-grow: 1;

​ 顺序：order:2;

4.案例分析

1

2

3

三.媒体查询与响应式布局

响应式布局

实战练习

1.设计一个div的关键帧动画效果

要求:

(1)div的宽度和高度为160px,div的边框阴影(不偏移,阴影模糊半径5px,阴影宽度3px,阴影颜色grey),div背景颜色green

(2)关键帧动画名称为:myok

(3)各关键帧样式

0%的关键帧的样式为:颜色为红色,移动位置(300px,0px)

25%的关键帧的样式为:颜色为绿色,移动位置(200px,200px)

50%的关键帧的样式为:颜色为灰色,移动位置(400px,400px)

100%的关键帧的样式为:颜色为红色,移动位置(0px,0px)

(4)元素的动画的定义:动画名称myok

动画播放时间3s

动画播放延时2s

动画播放次数无限次

动画播放顺序(交替播放)

2.使用flex完成以下布局设计

div父元素宽400px,高300px,有3个子div元素(80px宽,60px高)

三个div的内容依次为1,2,3,将3个子元素排列如下

3.使用flex完成以下布局,全部用div实现

1/2表示宽度为父元素的宽度的50%,1/3表示宽度为父元素的宽度的33%,auto代表元素的未指定宽度,图中的文字就是div的内容

颜色为红色,移动位置(0px,0px)

(4)元素的动画的定义:动画名称myok

动画播放时间3s

动画播放延时2s

动画播放次数无限次

动画播放顺序(交替播放)

2.使用flex完成以下布局设计

div父元素宽400px,高300px,有3个子div元素(80px宽,60px高)

三个div的内容依次为1,2,3,将3个子元素排列如下

3.使用flex完成以下布局,全部用div实现

1/2表示宽度为父元素的宽度的50%,1/3表示宽度为父元素的宽度的33%,auto代表元素的未指定宽度,图中的文字就是div的内容

4.运用媒体查询设计一个响应式布局结构,要求能适配手机,平板与pc屏幕