CSS3新增的功能有：过渡和动画，阴影和圆角

css3过渡动画：

css3都有哪些新增的东西 : 过度，动画，阴影，圆角；

例题：transition ：border-radius 500ms ease 5s,width 500ms ease 500ms,height 500ms ease 1s,background-color 500ms ease 1.5s

1.在哪产生的动画 ，2.动画消耗的时间 3.运动曲线；4.延长多长时间才开始执行动画，/*不写就不执行、*/

**规定过度效果的曲线，默认是 ease; 多个用 ，(逗号)隔开，

过度属性 : transition;

圆角 : border - radius ,

全部的话就用默认 transition : all is ease;

都有几种常规的：

transition : all is linear . 匀速；

transition : all is ease . 开始和结束慢速，中间加速；

transition ：all is ease - in . 开始的时候慢，越来越快，然后停止；

transition : all is ease - out . 开始时快，越来越慢，然后停止；

transition : al is ease-in -out .开始和结束时慢速。。。。

如果子元素超出父元素时 : overflow : hidden;

rgba(0 ,0, 0,0.5 );半透明；

line-height 行高；margin : 20px,间距20px,info信息

tansfrom 变形：

缩放、 旋转 、斜切 、位移：

代码

transform：scale（0.5   0.2）

《X Y 轴都缩放 第一个是x轴 第二个是y轴》

transform：rotate（360deg）

<《旋转360度》

transform：skew(360deg)

《斜切360度》

transform：translate（50px,50px）

《位移 第一个是x 第二个是y》

元素旋转：

transfrom : rotate(45deg) 默认是沿着z轴旋转；

transfrom : perspective(800px ) rotate(45deg)

perspective 设置透视距离，经验数 800px ，比较符合人眼的透视距离；

transfrom -style ： perseve-3d ,设置盒子按3d空间显示；

变形中间点

div : nthchild{} ;第几个孩子；

transfrom-origin:left center, 设置变形的中心点 (左中)；

transfrom-origin:left top,设置变形的中心点 (左上)；

背面可见

margin : 上，右，下，左，

如果不想变的话 加过度 transfom:all 500ms ease;

800是经验值 起始角度 rotatey (0deg);

有透视效果 transfrom -style : preserve -3d;

设置盒子背面是否可见

backface - visibity : hidden; 背面不可见 （隐藏不可见）；

图片翻面时另一张图片

animation 动画

多个设置用空格隔开；

animation : moving 1s ease(运动曲线) 1s(延迟) 5(动的次数 ) alternat(是否返回)

alternate 设置是否返回；

infinite 不限次数；

动画运岁动的状态 ： 暂停 animation-play-state : paused;

动画运动的状态 ： 运行 animation-play-state : running;

forwards 动画结束最后状态；

both 都 起始和结束都设置；

@keyframes 创建关键动画时；声明一个动画，给他后面随便起一个名字；

动画一个状态到另一个状态；

隐藏 overflow : hidden;

相对定位 ：position : relative;

绝对定位 : positiion : absolute;

动画定义的关键字:

@keyframes 名字{ 起始状态 from [ left 0px]

终止状态 to [ left 0px,]}

from 开始 ，to 结束；

循环一直走 ：infinte ;

transfrom : scaley;

多帧动画

位移动画 transfrom : tanslateY(Y轴) 10px;

圆角 border - ralios : 50px;

原路返回 ： alternate;

缩放 transfrom : scale(0.5 0.5)

box-shadow : 17px(X轴) 13px（Y轴）12px(羽化) 14px(扩展) pink(颜色)；

box-shadow : 180px(水平偏移) 20px(垂直) 17px(羽化) 0px(扩展) pink(颜色) inset;

写上inset 是内部阴影，不写是外部阴影。

运动遮罩：

代码 点击前 点击后

一定要用overflow，把子元素超过父元素的部分剪掉，隐藏起来。

animation动画：alternate返回动作   infinite循环不断的执行：

代码

css圆角阴影：

代码 效果图

作业：