希望你开心，希望你健康，希望你幸福，希望你点赞！
最后的最后，关注喵，关注喵，关注喵，佬佬会看到更多有趣的博客哦！！！
喵喵喵，你对我真的很重要！
目录
前言
这是整个章节的最后一篇，来吧!
CSS3 动画animation
3．@keyframes 规则的绑定
绑定动画名称（例如myAnimation）到某个元素(div)的样式上，并指定时长。格式如下：
div{
/* 设置图层基本样式 */
width:100px;height:100px;background:red;position:relative;
/* 设置标准动画子属性 */
animation: myAnimation 8s;
-moz-animation: myAnimation 8s; /* Firefox */
-webkit-animation: myAnimation 8s; /* Safari 和 Chrome */
-o-animation: myAnimation 8s; /* Opera */
}
CSS3 动画animation子属性设置
div{
/* 设置图层基本样式 */
width:100px;height:100px;background:red;position:relative;
/* 设置标准动画子属性 */
animation-name:myMOve;
animation-duration:5s;
animation-timing-function:linear;
animation-delay:2s;
animation-iteration-count:infinite;
animation-direction:alternate;
animation-play-state:running;
/* 仅以Safari and Chrome浏览器为例，其余类似。 */
-webkit-animation-name: myMOve;
-webkit-animation-duration:5s;
-webkit-animation-timing-function:linear;
-webkit-animation-delay:2s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:alternate;
-webkit-animation-play-state:running;
}
@keyframes myMOve{
/* 定义不同关键帧的样式 */
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
举个例子
<!-- edu_13_6_8.html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3动画</title>
<style>
div{width:100px;height:100px;background:red;position:relative; color:white;
animation:mymove 5s ;
-moz-animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite;
-o-animation:mymove 5s infinite;
}
@keyframes mymove{
from,0% {left:0px;background:red;top:0px;}
50% {left:100px;background:green;top:100px;}
to,100%{left:200px;background:blue;top:200px;}
}
@-webkit-keyframes mymove /* Safari 与 Chrome */
{
from,0% {left:0px;background:red;top:0px;}
50% {left:100px;background:green;top:100px;}
to,100%{left:200px;background:blue;top:200px;}
}
@-moz-keyframes mymove /* Firefox */
{
from,0% {left:0px;background:red;top:0px;}
50% {left:100px;background:green;top:100px;}
to,100%{left:200px;background:blue;top:200px;}
}
@-o-keyframes mymove /* Opera */
{
from,0% {left:0px;background:red;top:0px;}
50% {left:100px;background:green;top:100px;}
to,100%{left:200px;background:blue;top:200px;}
}
</style>
</head>
<body>
<h3>CSS3动画-沿矩形对角线运动</h3><hr>
<div>我在运动！</div>
</body>
</html>
CSS3 多列属性
使用CSS3 多列属性可以创建多个列来对文本进行布局，如同编辑报纸和杂志一样。常用的CSS3 多列属性主要有column-count、column-gap、column-rule 等。
基本语法
columns: column-width column-count; /* 复合属性*/
column-count: number|auto
column-width: auto|length;
column-rule: column-rule-width column-rule-style column-rule-color;
/* 复合属性*/
column-rule-width: thin|medium|thick|length;
column-rule-style: none|hidden|dotted|dashed|solid|double|groove| ridge|
inset|outset;
column-rule-color: color;
column-gap: length|normal;
column-fill: balance|auto; /* balance列长短平衡; auto列顺序填充*/
举个例子
<!-- edu_13_6_9.html -->
<!doctype html>
<html lang="en">
<head><meta charset="UTF-8">
<title>CSS3多列属性的应用</title>
<style>
p{text-indent:2em;
column-count:3; /* 设置列数 */
column-gap:50px; /* 设置列间隙 */
column-rule:4px outset #ff0000; /* 设置列宽度、线型、颜色 */
}
h2{
column-span:all; /* 设置标题跨所有列 */
text-align:center;background:#99ff99;
height:40px;font-size:28px;padding:6px auto;}
</style>
</head>
<body>
<h2>HTML 5 简介</h2>
<p>HTML标准自1999年12月发布的HTML4.01后，后继的HTML5和其它标准被束之高阁，为了推动Web标准化运动的发展，一些公司联合起来，成立了一个叫做 Web Hypertext Application Technology Working Group （Web超文本应用技术工作组 -WHATWG） 的组织。WHATWG 致力于 Web 表单和应用程序，而W3C（World Wide Web Consortium，万维网联盟） 专注于XHTML2.0。在 2006 年，双方决定进行合作，来创建一个新版本的 HTML。<br>
HTML5草案的前身名为 Web Applications 1.0，于2004年被WHATWG提出，于2007年被W3C接纳，并成立了新的 HTML 工作团队。<br>
HTML 5 的第一份正式草案已于2008年1月22日公布。HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。<br>
2012年12月17日，万维网联盟（W3C）正式宣布凝结了大量网络工作者心血的HTML5规范已经正式定稿。根据W3C的发言稿称：“HTML5是开放的Web网络平台的奠基石。”<br>
2013年5月6日， HTML 5.1 正式草案公布。该规范定义了第五次重大版本，第一次要修订万维网的核心语言：超文本标记语言（HTML）。在这个版本中，新功能不断推出，以帮助Web应用程序的作者，努力提高新元素互操作性。<br>
本次草案的发布，从2012年12月27日至今，进行了多达近百项的修改，包括HTML和XHTML的标签，相关的API、Canvas等，同时HTML5的图像img标签及svg也进行了改进，性能得到进一步提升。<br>
支持Html5的浏览器包括Firefox（火狐浏览器），IE9及其更高版本，Chrome（谷歌浏览器，Safari，Opera等；国内的傲游浏览器（Maxthon），以及基于IE或Chromium（Chrome的工程版或称实验版）所推出的360浏览器、搜狗浏览器、QQ浏览器、猎豹浏览器等国产浏览器同样具备支持HTML5的能力。</p>
</body>
</html>CSS3 文本效果
1．文本阴影text-shadow 属性
1）基本语法
text-shadow: h-shadow v-shadow blur color; //语法
text-shadow:2px 2px 8px #FF0000;//示例
2）语法说明
text-shadow 属性向文本添加一个或多个阴影。该属性是空格分隔的阴影列表，其中h-shadow 定义水平阴影，允许负值，必需；v-shadow 定义垂直阴影，允许负值，必需；
blur 可选。模糊的距离。color 可选。阴影的颜色。省略的长度是0。
2．文本换行text-wrap 属性
1）基本语法
text-wrap: normal|none|unrestricted|suppress;
2）语法说明
text-wrap：文本换行规则。所有浏览器目前均不支持此属性。
3．控制换行word-wrap 属性
1）基本语法
word-wrap: normal|break-word;
2）语法说明
word-wrap 自动换行属性允许强制文本进行换行，会对单词进行拆分。该属性有两个值：normal、break-word。其中normal 表示只在允许的断字点换行（浏览器保持默认处理）；break-word 表示在长单词或 URL 地址内部进行换行。
4．文本溢出text-overflow 属性
1）基本语法
text-overflow: clip|ellipsis|string;
2）语法说明
text-overflow: 属性规定当文本溢出包含元素时发生的事情。该属性有三个属性值，分别为clip、ellipsis、string。其中clip 表示修剪文本；ellipsis 表示显示省略符号来代表被修剪的文本； string 表示使用给定的字符串来代表被修剪的文本。
举个例子
<!-- edu_13_6_10.html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3文本效果</title>
<style>
h2{text-align:center;background:#99ccff;padding:5px auto;}
h1 {text-shadow:2px 2px 8px #FF0000;/* 设置文本阴影 */}
p.test{width:15em; border:1px solid #000000;
word-wrap:break-word;/* 设置自动换行*/}
div.test{white-space:nowrap;/* 规定文本不进行换行 */ width:12em;overflow:hidden; border:1px solid #000000;}
</style>
</head>
<body>
<h2>CSS3文本效果</h2>
<h1>具有模糊效果的文本阴影</h1>
<p>【未设置换行和宽度的段落】This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p>
<p class="test">【设置强制换行和宽度的段落】This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p>
<h3>下列div 包含长文本，都能正常显示</h3>
<div id=“” class=““>HTML 5 的第一份正式草案已于2008年1月22日公布。HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。</div>
<h3>下面两个div包含无法在框中容纳的长文本。不能完全显示，文本被修剪了。</h3><hr>
<p>下列div使用 "text-overflow:ellipsis" ：</p>
<div class="test" style="text-overflow:ellipsis;">HTML 5 的第一份正式草案已于2008年1月22日公布。HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。</div>
<h3>下列div使用 "text-overflow:clip"：</h3>
<div class="test" style="text-overflow:clip;">HTML 5 的第一份正式草案已于2008年1月22日公布。HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。</div>
</body>
</html>
综合练习
以“HUAWEI CONNECT 2016 全联接大会”的会议注册页面为例，采用HTML5 构建页面。
（1）整个页面采用article 标记构架。使用header、footer、hgroup、figure、figcaption、form、fieldset 等标记来进行页面布局。
（2）会议注册页面。采用fieldset、legend 进行表单元素分组。在其中分别采用input类型为text、email、tel、date、submit、reset 等来布局页面，注册姓名、报告题目、工作单位等文本输入域不能为空。
（3）footer 部分中宾馆信息采用address 标记进行布局。
<!-- edu_13_7_1.html -->
<!doctype html>
<html lang="en">
<head><meta charset="UTF-8">
<title>HTML5表单</title>
<style type="text/css">
img:hover{transform:rotate(30deg);}
</style>
</head>
<body>
<article style="margin:20px auto;width:850px;height:900px;background:#eeeeee;padding:30px;">
<header>
<hgroup>
<h1>塑造云时代，联接企业的现在与未来</h1>
<h3>HUAWEI CONNECT 2016全联接大会</h3>
<p style="text-indent:2em;">[中国，上海，<time datetime="2016-09-01">2016年09月1日</time>]在HUAWEI CONNECT 2016全联接大会上，华为IT产品线总裁郑叶来发表了“塑造云时代，联接企业的现在与未来”主题演讲，重磅发布了基于FusionCloud的31款云服务、FusionStorage 6.0云存储与FusionStage PaaS平台，并与现场的客户、合作伙伴、媒体、分析师等分享了华为在塑造云时代的过程中如何帮助企业加速云化，挖掘更多商业价值。</p>
<figure style="text-align:center;">
<img src="huawei_it.jpg" width="500" border="0" alt=""><br>
<figcaption>华为IT产品线总裁郑叶来发表主题演讲</figcaption>
</figure>
</hgroup>
</header>
<form method="post" action="">
<fieldset style="text-align:center;margin:10px 40px;">
<legend>会议注册页面</legend>
注册姓名：<input type="text" name="" required>
报告题目：<input type="text" name="" required><br>
工作单位：<input type="text" name="" required>
手机号码：<input type="tel"><br>
电子邮件：<input type="email" name="">
报到时间：<input type="date" /><br>
<input type="submit" value="注册"><input type="reset">
</fieldset>
</form>
<footer>
<p>住宿信息：请3月14日以后注册的代表自行预订会议期间的住宿。会务邮箱phylab@fudan.edu.cn。</p>
<p>给您推荐的宾馆:<address>邯郸路100号如家快捷酒店(复旦店)酒店电话021-51055577国定路428号 ；<br> 同舟大厦 酒店电话 021-65110356 。两家宾馆距离学校都非常近步行5分钟之内</address></p>
</footer>
</article>
</body>
</html>
总结
本章介绍了HTML5 新特性和一些基础的HTML5 的应用。重点讲述HTML5 的新增属性、新增表单属性、新增表单的input 类型、媒体元素（视频、音频）等方面的知识和程序设计技巧。
HTML5 新增了header、nav、article、section、aside、footer 等结构元素,使用这些语义的标记构建网页更为方便、快捷。HTML5 新增的其他页面元素也极大地丰富了页面内容与表现，结合JavaScript 脚本能够设计具有更好的用户体验的网站。HTML5 技术在移动互联网时代会具有更加杰出的表现。
运用CSS3 新增转换、过渡和动画特性可以增强页面的表现效果。运用CSS3 多列属性、文本效果属性可以美化页面排版效果。
希望你开心，希望你健康，希望你幸福，希望你点赞！
最后的最后，关注喵，关注喵，关注喵，佬佬会看到更多有趣的博客哦！！！
喵喵喵，你对我真的很重要！
版权声明：本文为博主作者：猫佛原创文章，版权归属原作者，如果侵权，请联系我们删除！
