七、H5 新标签 + CSS3。动画animation,transform,结构伪类选择器新标签，媒体

七、H5 新标签 + CSS3

1、额外：快捷键

p.box生成p标签，类名box  p#box 生成p标签，id名box

ul>li*5>a  ul里面五个li，每个li里一个a

ul>li>a*5  ul里面一个li,一个li里面5个a

p.box+p+h  生成同级p p h

2、新标签

（1）布局结构新增的标签

header 、 nav 、section 、footer 、video 、audio

（2）表单新增的input type属性值

email 、tel 、 number 、range 、date、、

3、背景及背景图片补充

（1）background-size：cover；背景随负责大小等比例缩放，直到宽高都铺满父盒子，图片不会变形，只是等比例缩放。

（2）background-size：contain；背景图片只要宽高中一个到达父盒子宽高就不再缩放，可以看见完整图片，也会有留白地方。

background: url() no-repeat  背景位置/大小

（3）背景定位区域

background-origin：

background-origin：padding-box；背景图片相对内边距来定位

background-origin：border-box； 背景图片相对边框来定位

background-origin：content-box；背景图片相对内容来定位

（4）背景裁剪

background-clip:padding-box 等（同上），背景被裁剪到内边距框

（5）多重背景

background:url() xx xx xx... ,url() xx xx xx... 前 压住 后

（6）线性渐变/径向渐变

background：linear-gradient（角度deg|to 起始位置，颜色1，颜色2...）

background:linear-gradient（起始位置，第一个颜色 0% ，.. ,.. ,.. ,）

background-image:radial-gradient(shape size at position,

...,last-color);

shape定义了形状  可以是circle（圆形） 或者 ellipse（椭圆形）。

（7）边框图片 上右下左 平铺 拉伸

border-image：url(/i/border.png) 数值 round|stretch

4、结构伪类选择器

（先排位置，再找标签，标签和位置对不上，选择器就是错误的）

(1)选择器：first-child{ 样式 }     选择器：last-child{ 样式 }

(2)选择器：nth-child（n）{ 样式 }   n是自然数，也可以是even（偶数）odd(奇数)

选择器：nth-child（表达式）{ 样式 } 表达式中的n必须写在前面

选择器：nth-last-child( ){ 样式 } 代表倒着数第几个/开始

选择器：nth-of-type( n){ 样式 }  先把要选的类型的标签排序，再根据n设置属性

 

5、计算盒子宽度 --calc函数

width：calc(100% - 数值) 运算符号还可以是 + * / ,这个数值可以是内边距、外边距、边框、其他元素宽度等。

例子：一元素套3平级div,左右各一个固定大小，中间的宽随浏览器变化

6、媒体（视频/音频）

（1）video <video></video>

autoplay自动播放 controls控制播放控件

loop循环  mutel静音播放  pooster第一帧画面（可以做封面）

7、变换（transform）

（1）2d转换

①平移translate（x,y）；x,y可以是像素，也可以是百分比，这里的百分比是相对自身元素的宽高，宽高没有的话由内容撑开的宽高

translateX  x轴方向平移、translatey y轴方向平移

②旋转rotate（数字deg）正数，顺时针；负数逆时针

rotateX   x轴旋转 、 rotateY  y轴旋转

③缩放scale（数字）：大于1为放大，小于1为缩小

（2）3d转换

3d转换和2d转换类似，只是多了一个Z轴

左手准则:拇指指向轴的正方向，四指弯曲方向为 绕这轴旋转的正方向

（3）视距

perspective：500px - 1200px;一般给父元素设置，观察移动

（4）平面模式或3d

transform-style：flat;平面模式。不开启三维立体

transform-style：preserve-3d;开启三维立体

8、动画

（1）定义动画

@keyframes  动画名{ css样式 }

（2）调用动画

animation:动画名 动画时间 延迟时间 执行次数 运动曲线 ....

duration delay

animation-play-state:running |pasued   开始 |暂停