h5新标签和css3新特性_nunumaymax

大大的周 02-07 7260

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;