h5c3进阶

首先是介绍一下h5新增的语义化标签，header 头部，nav导航 section 包裹着里面的内容，之前是直接用div来装的现在头部可以用header来装起来都是双标签，然后是多媒体标签，audio，标签里面的src需要添加需要播放的而地址， controles 是控制器，显示控制按钮的。

video视频标签，src也是地址，muted是静音播放，其中谷歌浏览器是不支持自动播放的，但是可以支持静音播放，loop是自动播放。 controles 也是控制器，控制按钮。

然后h5 也是新增了表单选项，from，用来接受提交的信息。

<input type="text" required="required" placeholder="请输入用户名" autofocus="autofocus" name="username"

            autocomplete="off"> <input type="submit" value="提交"> 上传头像: <input type="file" name="" id=""

            multiple="multiple">  还有一些新增的表单属性。

然后css3有伪元素选择器，before和after，设置内容的时候必须设置content，这个是内容，

然后是介绍一下tranform，2D转换的位移功能。一般用来做水平垂直剧中。

现在到了2d转换的旋转功能，表示旋转   transform: rotate(360deg);  这个是时间，旋转是全部旋转all，时间0.3秒旋转完成。  transition: all 0.3s;  其中可以用  transform-origin: 50px 50px; 这个来设置元素旋转的中心点，围着谁来旋转。 transform: scale(2);这个是用来表示缩放的，放大两倍。

     /* transform: rotate(180deg) translate(150px, 50px); */

            /* 我们同时有位移和其他属性，我们需要把位移放到最前面 */

            transform: translate(150px, 50px) rotate(180deg) scale(1.2); 连写顺序。

动画序列

 @keyframes move {

            0% {

                transform: translate(0, 0);

            }

            25% {

                transform: translate(1000px, 0)

            }

            50% {

                transform: translate(1000px, 500px);

            }

            75% {

                transform: translate(0, 500px);

            }

            100% {

                transform: translate(0, 0);

            }

        }

     /* 动画序列 */

        /* 1. 可以做多个状态的变化 keyframe 关键帧 */

        /* 2. 里面的百分比要是整数 */

        /* 3. 里面的百分比就是 总的时间（我们这个案例10s）的划分 25% * 10  =  2.5s */

 /* 动画名称 */

            animation-name: move;

            /* 持续时间 */

            /* animation-duration: 2s; */

            /* 运动曲线 */

            /* animation-timing-function: ease; */

            /* 何时开始 */

            animation-delay: 1s;

            /* 重复次数  iteration 重复的 conut 次数  infinite  无限 */

            /* animation-iteration-count: infinite; */

            /* 是否反方向播放 默认的是 normal  如果想要反方向 就写 alternate */

            /* animation-direction: alternate; */

            /* 动画结束后的状态 默认的是 backwards  回到起始状态 我们可以让他停留在结束状态 forwards */

            /* animation-fill-mode: forwards; */

            /* animation: name duration timing-function delay iteration-count direction fill-mode; */

            /* animation: move 2s linear 0s 1 alternate forwards; */

            /* 前面2个属性 name  duration 一定要写 */

            /* animation: move 2s linear  alternate forwards; */

     transform: translate3d(400px, 100px, 100px);这是用来表示3d动画的，3d比2d多1d，其中就是多来一条线，xyz多了一条z轴

        /* transform: translateX(100px);

            transform: translateY(100px); */

            /* transform: translateX(100px) translateY(100px) translateZ(100px); */

            /* 1. translateZ 沿着Z轴移动 */

            /* 2. translateZ 后面的单位我们一般跟px */

            /* 3. translateZ(100px) 向外移动100px （向我们的眼睛来移动的） */

            /* 4. 3D移动有简写的方法 */

            /* transform: translate3d(x,y,z); */

            /* transform: translate3d(100px, 100px, 100px); */

            /* 5. xyz是不能省略的，如果没有就写0 */

主要是多了一条z轴，把图片往后面两边拉扯，可以给人一种很真实的感觉。