Week4 day3 制作逐帧动画、摩天轮，以及认识新的H5标签

Week4 day3 制作逐帧动画、摩天轮，以及认识新的H5标签

今日总结：通过今天的学习，运用学习的动画知识制作了两个不一样的效果，一个是逐帧动画，另一个是制作了一个摩天轮。下午的时候，又学习了少部分H5里面的新标签。

制作逐帧动画

思路：首先一个逐帧动画肯定要调用关键帧，我把给的素材图片当成背景图，每一个关键帧背景图就往左移动一点，从而连贯起来看起来像是跑动一样。


通过每一帧把背景图想左平移一定距离后i得到的动画。

摩天轮

思路：制作摩天轮第一步：将背景替换成素材图
第二步：把摩天轮通过定位定位在窗口中间。
第三步：写一个div，宽高与摩天轮大小一致，用于放置任务图片。
第四步：将每个人物通过定位放置在合适的位置，看起来就像是在摩天轮上。
第五步：写关键帧并调用。
效果如图

最终效果看起来任人物和摩天轮是相对静止的。



调用关键帧

html5中的新标签

语义化标签

语义化结构标签：
section 更偏于划分区域。（网页的外围结构…更类似与div）
article 更偏向于内容的展示
aside 侧边栏（在一旁的）
header 网页头部或者是内容块头部
footer 网页的顶部或者内容快的底部
nav 导航区域。
figure 代表一个独立的区域
figcaption figure区域的标题
main 主体区域（IE不兼容）
hgroup 标题组

mark 高亮显示文本
time 用来处理时间
dialog 类似于对话框
在之前的学习中，我总数用div划分全部的布局，现在知道这些标签后，可以更加清楚的进行划分。

多媒体标签

1、视频
< video src=".">< /video>

属性：
autoplay 自动播放
controls 播放控件
loop 循环播放
muted 静音状态
poster 当视频没有加载或者没有播放的时候显示的封面图

2、音频
< audio>< /audio>

属性：
autoplay 自动播放
controls 播放控件
loop 循环播放
muted 静音状态

3、定义媒介资源：
< source>
type属性 -> 定义媒介类型

video里面 type属性的定义：video/ogg video/mp4 video/webm
audio里面 type属性的定义：audio/ogg audio/mpeg

新增的表单属性

h5新增的type的类型
< input type=“email”> 在提交整个表单的时候，验证是否符合邮箱的格式
< input type=“url”> 在提交的时候验证是否是一个网址 检测 http://
< input type=“range”> 生成滑动条
< input type=“number”> 限制必须为数字
< input type=“search”> 搜索框
< input type=“color”> 颜色选取

h5新增的表单属性
max="“用于< input type=“number”> 限制最大值最小值
min=”"