10-CSS3新特性

CSS3新特性

一、css3盒子模型

• css3中可以通过box-sizing来指定盒模型，有2个值：即可指定为content-box\border-box,这样我们计算盒子大小的方式就发生了改变

1、box-sizing:content-box;盒子大小为width+padding+border(默认的)；

2、box-sizing:border-box;盒子大小为width；

• 盒子模型我们改为box-sizing:border-box,那么和border就不会撑大盒子了（前提是，padding和border不会超过width宽度）

CSS3滤镜

• filter:函数（）；filter：blur(5px);模糊处理，数值越大越模糊

• calc函数：calc(),此函数让你在声明css属性值时执行一些计算。

  • width:calc(100%-60px);

  • 括号里可以使用加减乘除来进行计算

二、过渡

描述：

• 过渡（transtlation)是CSS3中具有颠覆性的特性之一，我们可以在不使用flash动画或JavaScript的情况下，当元素从一种样式变化为另外一种样式时，为元素添加效果

• 过度动画：是从一个状态，渐渐的过度到另外一个状态

• 可以让我们的页面更好看，更动感十足，虽然，低版本浏览器不支持，但不会影响页面布局

• 经常和：hover一起搭配使用

语法：

• transition:要过度的属性 （一般用all） 花费时间 运动曲线 何时开始；

属性

• 想要变化的CSS属性，宽度高度、背景颜色、内外边距都可以。如果想要所有的属性都过度，写一个all就可以了。

• 花费时间，单位是秒(必须带上单位)，如0.5s

• 运动曲线：默认是ease(可以省略)，ease-in\ease-out\ease-in-out\linear

• 合适开始：单位是秒（必须写单位），可以设置延迟触发时间，默认是0s（可省略）

• 过渡，谁做过度给谁加。想分别给各属性添加过渡，使用逗号分开即可

• transition:width  5s  linear  0.3s,height 3s  ease-out  0.8s;

  • ease：开始和结束慢，中间快，默认值是

  • ease-in：开始慢

  • ease-out：开始块

  • ease-in-out：和ease类似但是比它幅度大

  • linear：匀速

• translate:要过度的属性（一般用all） 花费时间 运动曲线 何时开始；

属性

• 想要变化的CSS属性，宽度高度，背景颜色，内外边距都可以。如果想要所有的属性都过度则写一个all就可以了

• 花费时间：单位是秒（必须写单位）如5s

三、转换（transform）

使用场景

• 一般写在hover里，和原始元素的过渡结合使用

旋转

转换时css3中具有颠覆性的特性之一，可以实现元素的位移、旋转、缩放等效果

transform转换可以理解为变形

（1）、移动：translate，2D移动，可以改变元素在页面中的位置，类似定位

• transform:translate(x,y);(或者分开写)

• transform:translateX(x);（=translate(x,0)

• transform:translateY(y);

• 特点

  • 定义2d转换中的移动，沿着x轴和y轴移动元素

  • translate最大的优点：不会影响其他元素的位置（占原来的位置）

  • translate中的百分比是相对于自身元素的高度和宽度来对比的，translate（50%，50%）；

  • 对行内标签没有效果

（2）、旋转：rotate，2D旋转，让元素在2维平面内按顺时针旋转或逆时针旋转

• transform：rotate（度数）;

• 特点

  • rotate里面跟度数，单位是deg

  • 角度为正时，顺时针，角度为负数时，逆时针

  • 默认的旋转中心点是元素的中心点

（3）、缩放：scale，2D缩放，控制元素放大还是缩小

• transform：scale（x,y）;参数如果不写单位，就是倍数的意思

• 特点

  • 注意其中的x和y用逗号分隔

  • transform:scale(1,1);宽和高都放大一倍，相对于没有放大

  • transform：scale(2,2);宽和高都放大2倍

  • transform：scale(2)；只写一个参数，第二个参数默认和第一个参数一样相当于scale(2,2);

  • transformX：scale(2)

  • transformY：scale(2)

  • 数字设置为小于1就是缩小

  • 最大的优势：可以设置旋转中心点缩放，而且不影响其他盒子。

（4）、倾斜：skew，2D倾斜

• skew：（40deg，-40deg)

• 第一个参数沿X轴倾斜。第二个参数沿着Y轴倾斜

2D转换综合写法

• transform：translate（） rotate（） scale（）；

• 其顺序会影响转换的效果

旋转中心点q设置2D旋转中心点，transform-origin，可以设置元素转换的中心点。

• 语法：transform-origin：X Y；

• 特点：

  • 注意后面的参数x和y用空格隔开

  • X Y默认旋转的中心点是元素的中心点（50% 50%）。默认值

  • 黑可以给x和y设置像素或者方位名词（top/bottom/left/center)

四、动画（animate）

动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来控制一个或一组动画，常用来实现复杂的动画效果

相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果

过渡：当元素从一种样式变换为另一种样式时，从一个状态慢慢变为另外一种状态

动画的基本使用，分为两步制作动画

• 定义动画

• 在使用（调用）动画

定义动画

用keyframs关键字定义动画（类似定义类选择器）

@keyframs  动画名称  {
    //开始状态
    from/0% {
    
    }
​
    //中间状态  
    …………
​
    //结束状态
    to/100% {
​
    }
}
​
//里面的百分比要是整数，表示占总的时间的划分占比，可以用来做多个状态的比变化

动画序列

• 0%是动画的开始，100%是动画的完成。这样的规则就是动画序列

• 在@keyframs中规定某项css样式，就能创建由当前样式渐渐改为新样式的动画效果

• 动画是使元素从一种样式渐渐变化为另外一种样式的效果，你可以改变任意多的次数

• 请用百分比来规定变化的时间，或用关键词from/to等同于开始和结束

元素使用动画

@keyfeames 规定动画

animation：所有的动画属性的简写（除了animation-play-state属性之外），用来调用动画

动画属性

1. animation-name：规定@keyframes动画的名词（必须的）

2. animation-duration：规定动画完成一个周期所花费的秒或者毫秒，默认是s

3. animation-timing-function：规定动画的运动曲线，ease/ease-in/ease-out/ease-in-out/linear/step().数字指定时间函数中的间隔数量步长，分几步来完成

4. animation-delay：规定动画何时开始

5. animation-iteration-count：规定动画播放次数，默认是1，还有infinite,无数次重复

6. animation-direction：规定动画在下一周期的运动方向，默认normal，alternate（反向）

7. animation-fill-mode：规定动画结束后状态，保持forwards回到起点backwards

8. animation-play-state：规定动画正在运行或暂停，默认是running,还有paused暂停

动画简写属性

animation：动画名称 持续时间 运动曲线 延迟时间（何时开始） 播放次数 （infinite) 是否反方向(alternate) 动画结束后的状态（forwards/backwards)

• 例如 animation:myanimate 4s linear 2s infinite alternate forwards;

3D转换

2D是平面坐标系，3D是三维坐标系立体的）

特点

• 进大远小，物体后面遮挡不可见

一、3D位移

• transform：translate3d(X Y Z);

  • 其中x,y,z分别要移动的轴的方向距离

  • x,y,z是不能省略的，如果没有就写0

• transform：translateX(X);

• transform：translateY(Y);

• transform：translateZ(z);

二、3D旋转

• transform：rotate3D(x,y,z,deg)

  • 沿着自定义轴deg角度

• transform：rotateX(45deg)；x轴正方向旋转45度

• transform：rotateY(45deg)；y轴正方向旋转45度

• transform：rotateZ(45deg)；z轴正方向旋转45度

左手准则：对于元素旋转的方向的判断

1. 左手的大拇指指向x轴的正方向

2. 其余手指的弯曲方向就是钙元素沿着x轴旋转的方向（正方向）

3. 左手的大拇指指向y轴的正方向

4. 其余的手指弯曲方向就是该元素沿着y轴旋转的方向（正值）

三、透视（perspective)

在2D平面产生近大远小视觉立体感，但是只是效果是二维的

• 如果想要网页产生3D效果需要添加透视（理解成3D物体投影在2D平面内）

• 模拟人类的视觉位置，可以安排一只眼睛去看

• 透视也称视距：视距就是人的眼睛到屏幕的距离

• 距离视距点越近的电脑平面成像越大，越远成像越小

• 透视的单位是像素（px）

透视写在被观察的父盒子上面

• d:就是视距，视距就是一个距离人的眼睛到屏幕的距离

• z:就是z轴，物理距离屏幕的距离，z轴越大（正值）我们看到的物体越大

四、呈现transform-style

控制子元素是否开启三维立体环境

• transform-style：flat;子元素不开启3d立体空间，默认的

• transform-style：preserve-3d;子元素开启3d效果开启立体空间

• 代码写给父级，但是影响的是子盒子

案例

• 两面翻转的盒子

• 旋转木马案例