关键帧动画_弹性盒子与媒体查询
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.设计一个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屏幕