前端开发:【弹性布局/动画】让你的网站瞬间升级!
本节讲解flex布局、grid网格布局、变形动画、Transition动画、Animation动画等内容
免费
97
第一节 flex布局
本节讲解 flex基础介绍、flex-direction排列属性、flex-wrap和order属性、f1 ex控制元素缩放、align- i tems和align-self控制对齐、 justfi fy-content控制元素分布等内容
视频 1 :
flex基础介绍 (05:42)
视频 2 :
flex-direction排列属性 (04:21)
视频 3 :
flex-wrap和order属性 (06:27)
视频 4 :
flex控制元素缩放 (07:03)
视频 5 :
align-items和align-self控制对齐 (06:01)
视频 6 :
justfify-content控制元素分布 (09:25)
视频 7 :
利用弹性布局实现一个新闻列表区域(一) (11:31)
视频 8 :
利用弹性布局实现一个新闻列表区域(二) (15:22)
第二节 grid网格布局
本节讲解grid基本概念、grid-template排列属性等内容
视频 1 :
grid基本概念 (03:08)
视频 2 :
grid-template排列属性 (08:18)
第三节 变形动画
本节讲解-位移,旋转,缩放,倾斜4种基本变形、元素同时进行多种变形、如何修改变化中心点等内容
视频 1 :
位移,旋转,缩放,倾斜4种基本变形 (09:10)
视频 2 :
元素同时进行多种变形 (02:13)
视频 3 :
如何修改变化中心点 (05:47)
第四节 Transition动画
本节讲解transition属性介绍、多个属性同时发生变化、实现一个气球跟随效果等内容
视频 1 :
transition属性介绍 (08:03)
视频 2 :
多个属性同时发生变化 (05:28)
视频 3 :
实现一个气球跟随效果 (07:36)
第五节 Animation动画
本节讲解Animation属性介绍、多个属性同时发生变化等内容
视频 1 :
Animation动画、属性介绍 (07:17)
视频 2 :
多个属性同时发生变化 (05:28)
章节案例
综合第一节至第五节内容,本案例用布局块实现京东首页的排版。
视频 1 :
用布局块实现京东首页的排版(一) (04:23)
视频 2 :
用布局块实现京东首页的排版(二) (11:49)
视频 3 :
用布局块实现京东首页的排版(三) (12:17)
视频 4 :
用布局块实现京东首页的排版(四) (15:54)
视频 5 :
用布局块实现京东首页的排版(五) (11:38)
离线

云端知识库创作 [官方]

私信

官方公众号

官方微信

官方微博

官方QQ群