前端基础学习：html5新增标签与css动画

html5标签

html5在移动设备上支持性能比极好，但也有好多不兼容的问题
html5语义化更加明确，它了一更新了一些标签同时也删除了一些标签
新增标签
<canvas>定义图形 可用于制作网页游戏 写3d特效（canvas 支持2D特效 绘制数据表）简单的动画 绘图功能
<video>定义视频 src=”“为视频来源 autoplay为自动播放效果 controls为向用户显示控，比如播放按钮 loop为当播放完成时再次重新播放循环播放
<audio> 定义音频

<video src="./mp4/valcano.mp4" autoplay controls loop></video>
<audio src="./mp4/valcano.mp4" autoplay controls loop ></audio>

<datalist> 定义下拉菜单 必须与联合使用
<option> 定义下拉菜单的选项

<input type="text" list="data">
<datalist id="data">
<option>1</option>
<option>12</option>
<option>123</option>
<option>1234/option>
<option>12345</option>
<option>123456</option>
</datalist>

<input> 定义输入域 用户可在其中输入数据
<output> 定义不同类型的输出

<input type="range" id="a" vaule="50" max="100">
<output for=a"></output>

<header>定义头部
<foorter> 定义尾部
<article>定义侧边栏
<mark>定义带有标记的文本

<p>HTML5<mark>不断更新</mark></p>

<meter>定义度量衡 类似于进度条
定义运行中的进度或者进程 比如下载进度的显示

<meter vaule="3" min="0" max="10"></meter>
<progress vaule="10" max="100"></progress>

<time>定义日期时间

<time> 2018-08-01</time>

css动画

之前所写过的效果都是鼠标悬停直接显示，比较单一而css3则解决了这种问题

• transform：转化动画：可旋转，平移， 伸缩，变形动画
  rotate 包含三种状态 x,y,z 三轴的变化：默认z轴变化
  translate 也分为三个值 x,y,z
  skew 里面分为两种 x,y
  scale 两个参数 宽度比例和高度比例
  scale 一个参数 两个值 等比例变化
  .block{
width: 100px;
height: 100px;
border: 1px solid red;
transform: rotate(45deg) ;
transform-style:preserve-3d;/!*将2d动画转化为3d动画*!/*/

• transition：过渡动画: 可以过渡元素的样式 也可以过渡元素 如下三种写法：

            transition: height 3s 1s linear,width 2s 1s linear;

            transition: all 3s linear;

             transition-property: height;
             transition-delay: 3s;
             transition-duration: 3s;
             transition-timing-function: linear;
             transition: all .5s linear;

• animation：帧动画： animation-delay 为延迟时间 animation-duration为完成时间 其执行方式有两种：

            animation: animateData 2s linear;
            animation-delay: 1s;
            animation-play-state: running;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
            animation-duration: 2s;
            animation-direction: alternate;
             @keyframes animateData {
         /*两种写法*
  /* 第一种*/ from{
               height: 0px;
           }
           to{
               height: 200px;
           }
 /*第二种*/ 0%{}
           20%{}
           50%{}
           100%{}
       }