社区
论坛
学习
工具
桌面OS
创作招募
登录/注册
前端开发:【弹性布局/动画】让你的网站瞬间升级!
本节讲解flex布局、grid网格布局、变形动画、Transition动画、Animation动画等内容
免费
193
第一节 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)
离线
云端知识库创作
[官方]
私信
视频教程
源码下载
用户评价
官网首页
产品介绍
版本介绍
产品动态
创作招募
关于我们
帮助中心
意见反馈
陕西云端重启信息科技有限公司 备案号:
陕ICP备2022000223号-2
官方公众号
官方微信
官方微博
官方QQ群