《网页设计与制作》课件10.0.1 HTML5与CSS3的更多特性_第1页
《网页设计与制作》课件10.0.1 HTML5与CSS3的更多特性_第2页
《网页设计与制作》课件10.0.1 HTML5与CSS3的更多特性_第3页
《网页设计与制作》课件10.0.1 HTML5与CSS3的更多特性_第4页
《网页设计与制作》课件10.0.1 HTML5与CSS3的更多特性_第5页
已阅读5页，还剩2页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

通过本章的学习，了解CSS原生动画的实现方式，能够设计并编写简单的CSS动画效果。掌握使用CSS3的特定属性实现响应式自适应布局。理解HTML5新增API的调用方法，可以通过简单的JavaScript脚本实现HTMLCanvas画布。了解下一阶段学习路线，指导学员对WEB应用开发未来的学习路线有一定认识。【知识目标】掌握CSS3实现原生动画的两种方法。理解CSS3响应式布局的一般方法理解HTML5新增API的调用手段。了解Web应用开发学习路线。【技能目标】能够利用CSS3的特性实现简单的原生动画。能够使用@media实现简单的响应式自适应布局。

教学目标10.1.1关于HTML5HTML5.0制定于HTML4.0.1标准的基础之上，延续了前一代版本的语言核心部分，通过对原有标签的修订和新的元素引入，为HTML文档强化了语义，目的在于增强人类和机器的可阅读性。与此同时，HTML5.0通过添加一些新的媒体元素，弥补了以往HTML页面只能使用浏览器插件播放音频和视频的缺陷，至此Flash走出了历史舞台。在原有的DOMAPI规范之外（API——ApplicationProgrammingInterface，应用程序接口），HTML5继续扩充了更多的API，例如HTML5针对<canvas>元素的文本APIHistoryAPI全屏API鼠标指针锁定API地理位置API拖放和触控事件10.1.2关于CSS3

通常根据浏览器的厂牌或内核划定私有属性的前缀，例如上面的分列属性column-count是目前草案规范的属性名称，而之前的部分就是私有属性前缀，一般私有属性有以下几种：-Webkit-以Webkit引擎为内核的浏览器，例如：Google的Chrome浏览器和Apple的Safari浏览器。-moz-以Mozilla基金会下的Gecko引擎为内核的浏览器，例如：Firefox浏览器。-o-Opera浏览器的私有属性。-ms-InternetExplorer浏览器（即IE浏览器）的私有属性，当某个特性称为W3C正式推行的标准后，去掉这些私有属性，可以减轻响应代码体量，例如上面的代码，如果多列布局模块正式发布，去掉私有属性后代码只有2行。下面我们一起看看CSS3中更精彩的内容——动画和媒体查询。10.1.2.1CSS3动画CSS3两种定义动画的方式有一些不同，animation属性设定的动画与我们日常所见的动画原理相同，即逐帧动画，需要结合关键词@keyframes来设定动画的关键帧，从而形成往复循环的动画；而transitions属性设定的动画属于让元素从某种状态逐渐“过渡”到另一种状态的动画，通过设定播放时长和过渡时间函数等属性形成动态效果，下面分别通过两个案例展示各自的效果：案例1：流水渐变色按钮本案例中按钮的渐变色通过线性渐变函数linear-gradient为元素设定渐变背景图实现，利用@keyframes配合背景图片的位移产生动态效果，关键帧中定义了5个帧的状态，按钮最终通过animation属性实现线性的流水动画。<!DOCTYPE

html><html

lang="en"><head>

<meta

charset="UTF-8">

<meta

name="viewport"

content="width=device-width,

initial-scale=1.0">

<title>Document</title>

<link

rel="stylesheet"

href="style.css"></head><body>

<div

class="container">

<a

href=""

class="btn">Button</a>

</div></body></html>body

{

margin:

0;}.container

{

padding:

2.5em;}.btn

{

text-align:

center;

font-family:

Impact,

Haettenschweiler,

'Arial

Narrow

Bold',

sans-serif;

display:

block;

width:

inherit;

margin:

.5em

auto;

padding:

1em

1.5em;

text-decoration:

none;

color:

white;

background:

linear-gradient(-45deg,

green,

blue,

indigo,

violet,

green);

background-size:

400%;

border-radius:

1em;}.btn:hover

{

animation:

waterfall

6s

linear

infinite;}@keyframes

waterfall

{

0%

{

background-position:

0%;

}

25%

{

background-position:

50%;

}

50%

{

backgroun

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论