一、图像过渡 类似于 Android 内的动画
Css 属性：
transition: 过渡；
transition-property: 过渡的 Css 属性名称
transition-duration: 过渡的持续时间；
transition-timing-function: 过渡的动作曲线
transition-delay: 过渡的开始时间；
过渡模式：linear 线性过渡（匀速过渡）；ease 平滑过渡 ；ease-in 由慢到快过渡； ease-out由快到慢过渡； ease-in-out 快到慢，慢到快过渡；
将多个属性进行过渡时使用 “ ， ” 隔开。全部 则 第一个参数使用 all
过渡写在本体上，谁做动画写在谁身上。
代码:
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
background-color: red;
width: 300px;
height: 300px;
transition: width 3s ease 0s ,background-color 3s;
}
div:hover {
width: 600px;
background-color: yellow;
}
</style>
</head>
<body>
<div></div>
</body>
二、2d 移动效果
控件按照 x 或 y 轴 进行运动；
第一个参数为 x 轴移动距离 第二个参数为 y 轴移动距离
transform ： translate（100px，100px）；
当参数为 -50% 的时候 ，就是走自己的尺寸的一半；
三、2d 缩放
控件 按照 x 或 y 轴进行缩放操作：
第一个参数为 X 轴参数 、 第二个参数为 Y 轴参数；
transform： scale（0.8，2.0）；
四、旋转
控件按照 控件圆心 进行旋转操作：
参数为旋转度数， 单位 为 deg 。
transform ： rotate（90 deg）；
设置旋转原点
两个参数 表示 对旋转位置的定位；
transform-origin: top left;
五、倾斜
控件沿某个方向 实现倾斜 如下图：
第一个参数为 x 轴方向角度，第二个参数为 Y 轴方向 角度；
transform ：skew（20deg，0deg）
六、悬浮效果
在控件底层设置一个阴影
第一个参数为 X 轴偏移距离， 第二个参数为 Y 轴偏移距离 ， 第三个 为阴影面积或者可以理解为阴影深浅，最后一个参数为颜色
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
七、Animation 动画
1、animation
属性 animation ：动画名称 播放时间 开始时间 播放次数 是否反方向运动；
还需要配合 @keyframes 动画名称{
form {开始位置}
to{j结束位置}
}
播放次数： infinite 表示 无限次循环播放 默认1次
是否在一个方向上反复重复： alternate 反复重复 默认为 normal
paused ：暂停动画
代码：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
position: absolute;
top: 400px;
left: 400px;
background-color: cornflowerblue;
width: 200px;
height: 200px;
animation: move 3s ease 2s;
}
@keyframes move {
from{
left: 0;
}
to{
left: 1000px;
}
}
</style>
</head>
<body>
<div></div>
</body>
八、 伸缩布局
该布局相当于 Android 内线性布局的权重属性
需要在父标签内 添加display: flex; 在子布局内 添加每个子布局的权重 flex: 1;
样例：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
section {
margin: auto;
width: 80%;
height: 50px;
display: flex;
}
div {
height: 100%;
flex: 1;
}
section div:nth-child(1) {
background-color: red;
}
section div:nth-child(2) {
background-color: yellow;
}
section div:nth-child(3) {
background-color: green;
}
</style>
</head>
<body>
<section>
<div></div>
<div></div>
<div></div>
</section>
</body>
可以用该属性进行配置 控件的大小和各种占比。
垂直方向三等分操作 在父布局添加flex-direction: column;
代码：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
section {
margin: auto;
width: 80%;
height: 50px;
display: flex;
flex-direction: column;
}
div {
height: 100%;
flex: 1;
}
section div:nth-child(1) {
background-color: red;
}
section div:nth-child(2) {
background-color: yellow;
}
section div:nth-child(3) {
background-color: green;
}
</style>
</head>
<body>
<section>
<div></div>
<div></div>
<div></div>
</section>
</body>
九、 文字阴影
第一个参数为 X 轴偏移距离，第二个参数为 Y 轴便宜距离，第三个参数为 模糊程度 ，第四个参数为 颜色；
属性： text-shadow: 10px 10px 1px rgba(255, 0, 0, 0.2);
代码：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p {
font-size: 20px;
color: cornflowerblue;
text-shadow: 10px 10px 1px rgba(255, 0, 0, 0.2);
}
</style>
</head>
<body>
<section>
<p> 我们公司在SOHO</p>
</section>
</body>
十、背景缩放
第一个参数 为 X 轴缩放距离，第二个参数为 Y 轴缩放距离。
属性：background-size: 300px auto;
background-size: cover; cover 表示平铺
background-size: contain; contain 表示适可而止；
十一、背景渐变色
需要进行兼容操作
background: -moz-linear-gradient(left top, red, blue);
第一个参数为起始位置，第二个参数为起始位置颜色，第三个参数为结束为止参数
十二、多背景
background: url(“tam.png”) no-repeat top left, url(“tam.png”), url(“ic_launcher.png”);
就是在一个属性里添加多个内容。
十三、浏览器前缀
用于不同浏览器的 适配操作。
-webkit- (谷歌, Safari, 新版Opera浏览器, 以及几乎所有iOS系统中的浏览器(包括iOS 系统中的火狐浏览器); 简单的说，所有基于WebKit 内核的浏览器)
-moz- (火狐浏览器)
-o- (旧版Opera浏览器)
-ms- (IE浏览器 和 Edge浏览器)
