h5新标签和css3新特性

h5新标签和css3新特性

• 一、h5布局元素
• 二、css3新增样式
• • 1.边框圆角
  • 2.阴影
  • 3.形变：旋转、缩放、位移
  • 4.transform-origin 属性
• 三、过渡效果

---

一、h5布局元素

布局元素相当于有语义的div，可以让人快速的了解整个静态页面的大致结构。

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

二、css3新增样式

1.边框圆角

border-radius: 左上 右上 右下 左下；

如果设置一个值，则这个值代表全部方向；

border-radius:30px;

如果设置两个值，第一个值表示左上和右下，第二个值表示右上和左下；

border-radius: 30px 100px;

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

border-radius: 50%;

2.阴影

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

box-shadow: 10px 50px 30px red;

该处使用的url网络请求的数据。

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

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

/* 顺时针旋转45度 */
transform: rotate(45deg);

/* 缩放0.5倍 */
transform: scale(0.5);

/* 沿着x轴平移50px，沿着y轴平移100px */
transform: translate(50px,100px);

连用多个属性：

transform: rotate(45deg) scale(0.7) translate(100px,100px);

4.transform-origin 属性

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

transform: 0;
transform: 0px 100px;
transform: 20% 40%;
transform: 20px 20px 20px;

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

三、过渡效果

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

transition-property: transform;

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

transition-duration: 1s;

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

• ease：默认值，规定慢速开始，然后变快，然后慢速结束的过渡效果；

• linear：规定以相同速度开始至结束的过渡效果；

• ease-in：规定以慢速开始的过渡效果；

• ease-out：规定以慢速结束的过渡效果；

• ease-in-out：规定以慢速开始和结束的过渡效果；

  transition-timing-function: linear;

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

transition-duration: 0.5s;

简写：
transition： 属性 描述 函数 延迟；

transition: transform 1s ease 0.5s;

设置多个值：
transition： 属性 描述 ， 属性 描述；

transition: transform 2s, width 2s, height 1s;