HTML5&CSS3新特性

1.新增语义化标签

• header：网页头部
• nav：导航栏
• aside：侧边栏
• article：显示文章
• section：布局的一部分
• footer：网页页脚

2.css3新增样式

 边框圆角:border-radius: 左上 右上 右下 左下；

如果设置一个值，则这个值代表全部方向 :border-radius:30px;

如果设置两个值，第一个值表示左上和右下，第二个值表示右上和左下:border-radius: 30px 100px;

若想绘制一个圆，则将border-radius设置为50%即可:border-radius: 50%;

3.阴影

box-shadow：10px 50px 30px red；
参数分别表示：x轴偏移量 y轴偏移量 模糊半径 阴影颜色（不设置颜色则默认为黑色）

4.形变：旋转、缩放、位移

transform：
rotate(45deg)：旋转，单位为deg表示角度；
scale(0.5)：缩放，单位为倍数；
translate(x,y)：位移，沿着x轴平移多少px，沿着y轴平移多少px；

5.transform-origin 属性

设置旋转元素的基点位置；
设置两个值能够改变元素 x 和 y 轴，设置三个值还能改变其 Z 轴；
transform-origin：x y z；

该属性必须与 transform 属性一同使用。

6.过渡效果

transition
transition-property：过渡属性（如transform，width，height）

transition-duration：过渡持续时间（如1s）

transition-timing-function：过度函数；
可选择的选项有：

ease：默认值，规定慢速开始，然后变快，然后慢速结束的过渡效果；
linear：规定以相同速度开始至结束的过渡效果；
ease-in：规定以慢速开始的过渡效果；
ease-out：规定以慢速结束的过渡效果；
ease-in-out：规定以慢速开始和结束的过渡效果；

transition-delay：过度延迟时间（如0.5s）；

缩写:transition： 属性 持续时间 函数 延迟；

设置多个值：
transition： 属性 持续时间 ， 属性 持续时间；

7.动画效果

1. keyframes
什么是keyframes？
@keyframes 是一个代码块，它包含着一系列的CSS规则，统称为 keyframes。 一个 keyframe 定义了一个完整动画里某一时刻的一种动画样式。动画绘制引擎会连贯平滑的实现各种样式间的转换。

keyframes的用法
@keyframes + 动画名 {…}
 

from…to…指定动画：

2. 动画属性animation
animation-name：规定需要绑定到选择器的keyframe名称；
animation-duration：规定完成动画所花费时间，以秒或毫秒计；
animation-timing-function：规定动画的速度曲线；
animation-delay：规定在动画开始之前的延迟；
animation-iteration-count：规定动画应该播放的次数；

对于动画属性，我们通常使用连写的方式：
animation： keyframe名称 动画时间 函数 延迟 播放次数；
 

1.设置多个百分比的动画效果