属性兼容+动画+弹性布局部分知识
如何知道属性的兼容问题
caniuse.com/ 点击此链接可以查询，里面 红色 代表不兼容
3D缩放
-
2d缩放 只能缩放 平面图形的 高度和宽度。
-
3d缩放 可以缩放 立体物体的 宽度、高度和厚度
scaleX 缩放宽度
scaleY 缩放高度
scaleZ 缩放厚度 （立体前方与后方的距离）
scaled(1,1,1) 同时 对 长宽高 做缩放
动画效果
定义动画
第一种：
@keyframes 动画名称 {
form {
}
to {
}
}
第二种：
@keyframes 动画名称 {
0% {
}
25% {
}
50% {
}
75% {
}
100% {
}
}
使用动画
animation: 动画名称 时间;
使用案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动画</title>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
div {
margin: 100px auto;
width: 300px;
height: 300px;
background-color: pink;
/* 2、使用动画 */
animation: move 5s;
}
/* 1.定义动画 */
@keyframes move {
0% {
background-color: red;
}
25% {
background: #000;
}
50% {
background-color: #fff;
}
75% {
background-color: #fff;
}
100% {
border-radius: 50%;
background-color: skyblue;
}
}
</style>
</head>
<body>
<div>欢迎观看</div>
</body>
</html>
动画的其他属性值
- 动画名称： animation-name: move;
- 动画播放时间： animation-duration: 5s;
- 设置动画的速度曲线：animation-timing-function: ease-in;
- 设置动画延迟时间： animation-delay: 2s;
- 设置动画播放次数：animation-iteration-count: infinite;
- 设置动画方向： animation-direction: reverse;
- 设置延迟状态和结束状态：animation-fill-mode: both;
- 动画播放或暂停：animation-play-state: running;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动画</title>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
div {
width: 300px;
height: 300px;
background-color: pink;
/* 1、动画名称 */
animation-name: move;
/* 2、动画播放时间： */
animation-duration: 5s;
/*
3、设置动画的速度曲线：
（1）动画以低速开始，然后加快，在结束前变慢。（默认值ease）
（2）匀速（linear）
（3）先低速再加快（ease-in）
（4）n步走完。steps(n)
*/
animation-timing-function: ease-in;
/* 4、设置动画延迟时间 */
animation-delay: 2s;
/* 5、设置动画播放次数： */
animation-iteration-count: infinite;
/*
6、设置动画方向：
（1）normal 默认状态 先方向再正方向
（2）alternate 先正方向再反方向
（3）reverse 先反方向再反方向
（4）alternate-reverse 先反方向在正方向
*/
animation-direction: reverse;
/*
7、设置延迟状态和结束状态：
（1）默认状态 显示的是 自身的状态 （即背景颜色为粉红色）
（2）设置开始前的状态（backwards）：
在延迟时间内显示的是第一帧（即0%时的背景颜色为红色）的状态，而不是自身的状态（即背景颜色为粉红 色），并且最后的状态为自身的状态（即背景颜色为粉红色）
（3）设置结束的状态（forwards）：
设置此属性值，结束显示的状态为最后一帧（即 100% 背景颜色是天空蓝）的状态，但是其开始前延迟的状 态为默认状态
（4）.both：设置此属性可以同时拥有 backwards 和 forwards 的状态
*/
animation-fill-mode: both;
/*
8、动画播放或暂停：
动画开启（默认值running）与暂停（paused）paused一般配合:hover使用
*/
animation-play-state: running;
}
@keyframes move {
0% {
background-color: red;
margin-left: 0;
}
100% {
border-radius: 50%;
background-color: skyblue;
margin-left: 1000px;
}
}
</style>
</head>
<body>
<div>欢迎观看</div>
</body>
</html>
flex弹性布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>flex布局</title>
<style>
/*
1.设置 div 变成 flex 盒子
display:flex;
2.div中的子元素 发生一些改变
1 设置了flex的盒子 称之为 父项
2 盒子里面的子元素 称之为 子项
3.具体变化
1 不再区分什么 块级、行内和行内块元素 全部都可以设置宽度和高度
2 子项 默认的宽度和高度
宽度由内容撑开
高度 等于父项的高
3 子项
使用 浮动没有效果 无效
使用 定位、margin、transform都有效的
4 默认情况下 子项总宽度大于父项的宽度也不会换行
flex不会换行 智慧压缩自身的宽度
*/
div {
margin: 50px auto;
width: 600px;
height: 600px;
background-color: pink;
display: flex;
/*
justify-centet属性 是弹性布局的主轴
主轴的对齐方式：
1 左对齐 flex-start
2 右对齐 flex-end
3 居中对齐 center
4 先两侧对齐，间隔存放 space-between; 快捷键：sb
5 间隔存放，两侧空间小于中间 space-around
6 绝对平均 space-evenly sv
*/
justify-content: space-evenly;
}
span {
width: 100px;
height: 100px;
background-color: skyblue;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
</html>
代码理解示意图：
justify-content: space-between;
justify-content: space-around;
justify-content: space-evenly;
