1. 浏览器前缀？
CSS3去兼容不同的浏览器，针对旧的浏览器做兼容，新浏览器基本不需要添加前缀。
2. transition 过渡？
transition-property : 规定设置过渡效果的CSS属性的名称。all指定所有属性1进行过度；可以指定某个特定属性进行过渡；
transition-duration : 规定完成过渡效果需要多少秒或毫秒。
transition-delay : 定义过渡效果何时开始。 ( 延迟(数值为正数)，也可以提前(数值为负数) )
div{width: 100px;height: 100px;background: red; transition-property:all; transition-duration: 3s; transition-delay: -2s;} div:hover{width: 200px;height: 200px;background: blue;}
transition-timing-function : 规定速度效果的速度曲线。注：不要加到hover上。
简写transition:1s 2s linear;
<title>Document</title>
<style>
ul,li{margin: 0;padding: 0;list-style: none;}
ul{width: 360px;}
ul li{
width: 60px;height: 70px;float: left;background: url('./img/aNavBg.png');transition: .5s;}
ul li:nth-child(1){background-position: 0px -70px;}
ul li:nth-child(2){background-position: -60px -70px;}
ul li:nth-child(3){background-position: -120px -70px;}
ul li:nth-child(4){background-position: -180px -70px;}
ul li:nth-child(5){background-position: -240px -70px;}
ul li:nth-child(6){background-position: -300px -70px;}
ul li:hover:nth-child(1){background-position: 0px 0px;}
ul li:hover:nth-child(2){background-position: -60px 0px;}
li:hover:nth-child(3){background-position: -120px 0px;}
ul li:hover:nth-child(4){background-position: -180px 0px;}
ul li:hover:nth-child(5){background-position: -240px 0px;}
ul li:hover:nth-child(6){background-position: -300px 0px;}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
3. transform变形？
translate : 位移
translateX
translateY
translateZ ( 3d )
scale : 缩放 （值是一个比例值，正常大小就是1，会已当前元素中心点进行缩放）
scaleX
scaleY
scaleZ (3d)
rotate : 旋转 （ 旋转的值，单位是角度 deg ）
rotateX (3d)
rotateY (3d)
rotateZ ( 和rotate是等级关系，那正值按顺时针旋转，负值按逆时针旋转 )
skew : 斜切
skewX : 单位也是角度，正值向左倾斜，负值向右倾斜。
skewY
transform的注意事项：
1. 变形操作不会影响到其他元素。
2. 变形操作只能添加给块元素，但是不能添加给内联元素。
3. 复合写法，可以同时添加多个变形操作。
执行是有顺序的，先执行后面的操作，再执行前面的操作。
translate会受到 rotate、scale、skew的影响
4. transform-origin : 基点的位置
x y z(3d)
4. animation 动画？
animation-name : 设置动画的名字 (自定义的)
animation-duration : 动画的持续时间
animation-delay : 动画的延迟时间
animation-iteration-count : 动画的重复次数 ，默认值就是1 ，infinite无限次数
animation-timing-function : 动画的运动形式
注：
1. 运动结束后，默认情况下会停留在起始位置。
2. @keyframes : from -> 0% , to -> 100%
@keyframes myBox{
0%{ transform: translate(0,0); }
25%{transform : translate(200px,0);}
50%{ transform : translate(200px,200px); }
75%{ transform : translate(0,200px); }
100%{ transform : translate(0,0); }
}
animation-fill-mode : 规定动画播放之前或之后，其动画效果是否可见。
none (默认值) : 在运动结束之后回到初始位置，在延迟的情况下，让0%在延迟后生效
backwards : 在延迟的情况下，让0%在延迟前生效
forwards : 在运动结束的之后，停到结束位置
both : backwards和forwards同时生效
animation-direction : 属性定义是否应该轮流反向播放动画。
alternate : 一次正向(0%~100%)，一次反向(100%~0%)
reverse : 永远都是反向 , 从100%~0%
normal (默认值) : 永远都是正向 , 从0%~100%
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{margin: 0;padding: 0}
ul{list-style: none; width: 150px;margin: 30px auto;}
ul li{float: left; width: 50px;position:relative; height: 50px;}
ul li img{position: absolute;top: 50%;left: 50%;margin: -10px 0 0 -11px;}
ul li:hover img{animation: move .5s}
@keyframes move{
0%{transform:translate(0,0);opacity: 1;}
60%{transform:translate(0,-50px);opacity:0;}
61%{transform:translate(0,30px);}
100%{transform:translate(0,0);opacity:1;}
}
</style>
</head>
<body>
<ul>
<li>
<img src="./img/1.png" alt="">
</li>
<li>
<img src="./img/2.png" alt="">
</li>
<li>
<img src="./img/3.png" alt="">
</li>
</ul>
</body>
</html>
5. animate.css？
一款强大的预设css3动画库。
官网地址：https://daneden.github.io/animate.css/
基本使用：
animated : 基类(基础的样式，每个动画效果都需要加)
infinite : 动画的无限次数
6. 3D操作？
transform:
rotateX() : 正值向上翻转
rotateY() : 正值向右翻转
translateZ() : 正值向前，负值向后
scaleZ() : 立体元素的厚度
transform: rotateZ(-180deg);旋转
3d写法
scale3d() : 三个值 x y z
translate3d() : 三个值 x y z
rotate3d() : 四个值 0|1(x轴是否添加旋转角度) 0|1(y轴是否添加旋转角度) 0|1(z轴是否添加旋转角度) deg
<style>
.box1{
width: 300px;
height: 300px;
border: 1px solid black;
margin: 30px auto;
perspective: 200px;
}
.box2{
width: 100px;
height: 100px;
background: red;
margin: 100px;
transition: 1s;
transform: rotateX(0);
}
.box1:hover .box2{
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">asd</div>
</div>
perspective（景深）: 离屏幕多远的距离去观察元素，值越大幅度越小。
perspective-origin : 景深-基点位置，观察元素的角度。
transform-origin: center center -50px; （Z轴只能写数值，不能写单词）
transform-style : 3D空间
flat (默认值2d)、preserve-3d (3d，产生一个三维空间)
backface-visibility : 背面隐藏
hidden、visible (默认值)
7. CSS3提供了扩展背景样式？
background-size : 背景图的尺寸大小
cover : 覆盖
contain : 包含
background-origin : 背景图的填充位置
padding-box (默认)
border-box
content-box
background-clip : 背景图的裁切方式
padding-box
border-box (默认)
content-box
注：复合样式的时候，第一个是位置，第二个是裁切
8. CSS3渐变？
1. 线性渐变 -> linear-gradient是值，需要添加到background-image属性上
.box{width: 300px;height: 300px;
border: 1px solid black;background-image: linear-gradient(red 25% ,green 75%,yellow 100%);}
</style>
</head>
<body>
<div class="box"></div>
注：渐变的0度是在页面在下边，正值会按照顺时针旋转，负值按逆时针旋转。
（to top bottom）等‘
2. 径向渐变 -> radial-gradient ，从中心点向四周；
.box{width: 300px;height: 300px;
border: 1px solid black;
background-image: radial-gradient(red 25%,blue 50%,green 75%);}
案例：渐变的加载进度条
..progress{width: 300px;height: 30px;
border: 1px solid black; margin: 100px;
background-image:linear-gradient(to right top,#999 25%,#080 25%,#080 50%,#999 50%,#999 75%,#080 75%);
background-size: 30px;animation: move infinite 2s linear;}
@keyframes move{
0%{
background-position: 0 0;
}
100%{background-position: 300px 0;}
}
</style>
</head>
<body>
<div class="progress"></div>
9. 字体图标？
font-face是CSS3中的一个模块，他主要是把自己定义的Web字体嵌入到你的网页中。
好处：
1.可以非常方便的改变大小和颜色
font-size color
2.放大后不会失真
3.减少请求次数和提高加载速度
4.简化网页布局
5.减少设计师和前端工程师的工作量
6.可使用计算机没有提供的字体
使用：
@font-face语法
像.woff等文件都是做兼容平台处理的, mac、linux等。
案例：
@font-face {
font-family:hello; /*font-family两个值一样,则会映射到一起;*/
src:url(//at.alicdn.com/t/font_1401963178_8135476.eot);
src:url(//at.alicdn.com/t/font_1401963178_8135476.eot?#iefix) format('embedded-opentype'), url(//at.alicdn.com/t/font_1401963178_8135476.woff) format('woff'), url(//at.alicdn.com/t/font_1401963178_8135476.ttf) format('truetype'), url(//at.alicdn.com/t/font_1401963178_8135476.svg#iconfont) format('svg')
}
div{
font-family: hello;
}
{
font-family: hello;
}
</style>
</head>
<body>
<div></div>
<span>㑈 </span>
</body>
阿里巴巴矢量图标库： www.iconfont.cn : 提供了大量免费的字体图标。 自定义字体图标 icomoon.io/app : 在线生成字体图标。
