1.css3动画实例讲解
网页左侧分享的动画过渡效果，先看下效果图
当鼠标移入分享的时候，会出现图的效果。这种是怎么实现的呢 ？
首先，这是个过渡效果，这里会用到transision来实现过渡的时间。其次，先把图二的效果写好，然后用绝对定位让红色的区域向左移动至看不到为止。最后用到hover来显示终点的效果。通过这个过程会有一个过渡的时间来实现。主要代码如下：
#share{ width:300px; height:300px; background:red; position: fixed; left: -300px; top:50%; margin-top:-150px; transition:1s; } #share div{ width:30px; height: 100px; background:blue; position:absolute; right:-30px; top:0; color:white; font-size:30px; } #share:hover{ left:0;}
2.transition过渡效果
transition-property : 规定设置过渡效果的CSS属性的名称。
all ( 默认值 ) , 指定 width , height;
transition-duration : 规定完成过渡效果需要多少秒或毫秒。
需要添加单位：s (秒) ms (毫秒) 1s == 1000ms
transition-delay : 定义过渡效果何时开始。
2s : 延迟两秒进行过渡
-2s : 提前两秒进行过渡
transition-timing-function : 规定速度效果的速度曲线。
运动形式：加速、减速、匀速...
linear
ease（默认值）
ease-in
ease-out
ease-in-out
cubic-bezier
（ http://cubic-bezier.com ）
复合写法：
transition:all 2s linear; √
transition:linear 2s all; √
transition:2s linear all; √
注意：当总时间与延迟时间同时存在的时候，就有顺序了，第一个是总时间，第二个是延迟时间。
transition:2s 3s linear all; √
注意：不要把transition放到hover中
3.用css实现动画
animation动画？
原理：逐帧动画。会把整个运动过程，划分成100份。
animation-name : 设置动画的名字 (自定义的)
animation-duration : 动画的持续时间
animation-delay : 动画的延迟时间
animation-iteration-count : 动画的重复次数 ，默认值就是1 ，infinite无限次数
animation-timing-function : 动画的运动形式
ease linear
@keyframes 动画的名字 {
from {}
to {}
}
from : 起点位置 , 等价于 0% to : 终点位置 ，等价于 100%
注：默认情况下，元素运动完毕后，会停到起始位置。
复合样式：
animation
animation-fill-mode : 规定动画播放之前或之后，其动画效果是否可见。
none (默认值) : 在运动结束之后回到初始位置，在延迟的情况下，让0%在延迟后生效
backwards : 在延迟的情况下，让0%在延迟前生效
forwards : 在运动结束的之后，停到结束位置
both : backwards和forwards同时生效
animation-direction : 属性定义是否应该轮流反向播放动画。
alternate : 一次正向(0%~100%)，一次反向(100%~0%)
reverse : 永远都是反向 , 从100%~0%
normal (默认值) : 永远都是正向 , 从0%~100%
4.css3渐变
线性渐变：
background-image:linear-gradient( 20deg , red , blue);
注：角度是0deg在容器的最下面bottom位置。正数就是顺时针旋转。
径向渐变：
radial-gradient : 径向渐变
5.css阴影
（1）文字阴影
text-shadow
x y blur(模糊程度) color 多阴影
在默认情况下，阴影的颜色和文字的颜色相同
（2）盒子阴影
box-shadow
x y blur(模糊程度) spread(范围) color inset(内阴影)|outset(外阴影，默认值) 多阴影
注：盒子默认的阴影就是黑色。
6.css3圆角的实现
当宽高不一样的情况下？
border-radius : 100px | 50% 这是有区别的
border-radius: 20px; 四个角
border-radius: 20px 40px; 左上和右下 右上和左下
border-radius: 20px 30px 40px 50px; 左上 右上 右下 左下 (顺时针)
7.css3实现多种背景效果
当宽高不一样的情况下？
border-radius : 100px | 50% 这是有区别的
border-radius: 20px; 四个角
border-radius: 20px 40px; 左上和右下 右上和左下
border-radius: 20px 30px 40px 50px; 左上 右上 右下 左下 (顺时针)
8.css过渡，变形，位移，3D，景深
transform
transform变形？
translate : 位移
transform:translate(100px,100px); : 两个值 分别对应 x 和 y。
transform:translateX(100px);
transform:translateY(100px);
transform:translateZ(100px); ( 3d )
scale : 缩放
transform:scale(num) num是一个比例值，正常比例是1。
transform:scale(num1 , num2) 两个值 分别对应 w 和 h
transform:scaleX()
transform:scaleY()
transform:scaleZ() ( 3d )
rotate : 旋转
transform:rotate(num) num是旋转的角度 30deg
正值：顺时针旋转
负值：逆时针旋转
表示一个角：角度deg 或 弧度rad
rotateX() ( 3d )
rotateY() ( 3d )
rotateZ()
注 : rotate()跟rotateZ()是等价关系。
skew : 斜切
transform:skew(num1,num2) : num1和num2都是角度，针对的是x 和 y
transform:skewX()
transform:skewY()
注：skew没有3d写法。
注：所有的变形操作，都不会影响到其他元素。(类似于相对定位)
注：变形操作对inline(内联元素)不起作用的。
注：transform可以同时设置多个值。
先执行后面的操作，在执行前面的操作。
位移会受到后面要执行的缩放、旋转和斜切的影响。
tranform-origin 基点位置 ?
主要是针对 旋转和缩放，默认都是中心点为基点。
3D效果？
perspective(景深) : 离屏幕多远的距离去观察元素，值越大幅度越小。
3D的眼镜
rotateX
rotateY
translateZ
scaleZ
注：反馈回来的立体，仅限于平面。
transform-style : 3D空间
flat (默认值2d)、preserve-3d (3d，产生一个三维空间)
注：只要是有厚度的立体图形，就必须添加3D控件。
注：在立方体中默认会沿着第一个面进行旋转。
tranform-origin : x y z; (z不能写单词，只能写数字)
perspective-origin : 景深-基点位置，观察元素的角度。
下面利用3d是做一个正方体
主要css代码如下：
*{ margin:0; padding:0;} ul{ list-style: none;} #box{ width:300px; height: 300px; border:1px black solid; margin:30px auto; perspective: 500px; perspective-origin: right top; } #box ul{ width:100px; height:100px; margin:100px; position: relative; transition: 4s; transform-style: preserve-3d; transform-origin: center center -50px; /* transform:scale3d(.5 , 2 , 4); */ } #box ul li{ width:100%; height: 100%; position: absolute; left:0; top:0; text-align: center; line-height: 100px; font-size:30px; } #box ul li:nth-of-type(1){ background:red;} #box ul li:nth-of-type(2){ background:blue; left:100px; transform-origin:left; transform:rotateY(90deg);} #box ul li:nth-of-type(3){ background:green; left:-100px; transform-origin:right; transform:rotateY(-90deg); } #box ul li:nth-of-type(4){ background:hotpink; top:-100px; transform-origin:bottom; transform:rotateX(90deg); } #box ul li:nth-of-type(5){ background:gray; top:100px; transform-origin:top; transform:rotateX(-90deg); } #box ul li:nth-of-type(6){ background:yellow; transform:translate3d(0,0,-100px) rotateY(180deg); } #box:hover ul{ /* transform:rotateY(360deg); */ transform:rotate3d(1,1,1,360deg); }
解析：在用css编写正方体之前我们要想象，如何才能制作一个正方体？
首先正方体有6个面，我们利用绝对定位把5个面固定住.然后第六个面利用位移加反转的方法把它“推”
下去，这样正方体的模型就有了。
9.css3的定位
position
浮动：解决左右排列的问题。（主要去做的）
定位：解决叠加排列的问题。（主要去做的）
position取值
static（默认）
relative : 相对定位
如果没有定位偏移量，对元素本身没有任何影响
不使元素脱离文档流，空间是会被保留。
不影响其他元素布局
left、top、right、bottom是相对于当前元素自身进行偏移的
absolute : 绝对定位
使元素完全脱离文档流
使内联元素支持宽高 （让内联具备块特性）
使块元素默认宽根据内容决定（让块具备内联的特性）
如果有定位祖先元素相对于定位祖先元素发生偏移，没有定位祖先元素相对于整个文档发生偏移（绝对、相对、固定）
注：如果祖先元素中有多个元素具备定位模式，那么是已离自己最近的祖先元素进行偏移。
fixed : 固定定位
使元素完全脱离文档流
使内联元素支持宽高 （让内联具备块特性）
使块元素默认宽根据内容决定（让块具备内联的特性）
相对于整个浏览器窗口进行偏移，不受浏览器滚动条的影响
不会受到祖先元素的影响。
sticky : 黏性定位
在没有到达指定位置的时候，是没有定位效果的，到达了指定位置，就变成了固定模式。
定位偏移量 : left top right bottom , 不能单独使用，必须得配合定位模式。
z-index定位层级
默认层级为0
嵌套时候的层级问题
比较的时候，会先跟同级别的先比较。（比较的时候，必须有定位模式和z-index）
清除浮动：
1. 解决上下排列的情况：
利用clear属性清除float浮动
clear : left | right | both(比较常用的，左右浮动都清除)
2. 解决嵌套的情况：
固定宽高 : 不推荐 , 不能把高度固定死，不适合做自适应的效果。
父元素浮动 : 不推荐 , 因为父容器浮动也会影响到后面的元素。
overflow : hidden (BFC规范) , 如果有子元素想溢出，那么会受到影响。
display : inline-block (BFC规范)，不推荐，父容器会影响到后面的元素。
设置空标签 : 不推荐 , 会多添加一个标签。
after伪类
其中after伪类是比较推荐的做法，也是目前比较流行的做法。