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%{}
}