<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>css3的属性的设置</title>
<style>
div{
width: 100px;
height: 100px;
background: red;
position: relative;
animate:myfirst 5s linear 2s infinite alternate;
-moz-animate:myfirst 5s linear 2s infinite alternate;
-webkit-animate:myfirst 5s linear 2s infinite alternate;
-o-animate:myfirst 5s linear 2s infinite alternate;
}
@keyframes myfirst{
0% {background: red; left: 0;top: 0;}
25%{background: yellow; left: 200px; top: 0;}
50% {background: red; left: 0;top: 0;}
75%{background: yellow; left: 200px; top: 0;}
100% {background: red; left: 0;top: 0;}
}
@-moz-keyframes myfirst{

}
@-webkit-keyframes myfirst{

}
@-o-keyframes myfirst{

}
.css3{
border-radius: 20px;
box-shadow: x y 模糊程度 #888;
border-image:;
text-shadow:x y 模糊的程度 #888;
word-wrap:break-word;
transition:width 2s linear 2s;
-webkit-transition:width 2s linear 2s;
background:-webkit-linear-gradient(red,blue);
background:linear-gradient(red,blue);
}
@font-face{
font-family: myfirstfont;
src:url();
font-weight: bold;
}
div:hover
{
width:300px;
}
</style>

<style>

</style>

</head>
<body>
<div></div>
<div class="html5">
sessionstorage,localstorage:
sessionStorage用于本地存储一个会话的数据，只有 在同一个会话的页面才能访问并且当会话结束后数据也随之销毁
localstorage:用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期

</div>
<script>
if(window.localstorage){}else{}
localstorage.t1='cdvf';
localstorage.['t2']='cfdv';
localstorage.setItem("t4",'cfdesfv');
localstorage.getItem('t5');
localstorage.length;
localstorage.key(0);
localstorage.clear();
localstorage.removeItem('t1');
</script>
<div class="html5">
html5离线存储适合玩游戏
1,apache的配置
2,index.php引入html 头部引入mianfest
3，在foffice.mainfest中引入如下的内容
apache
4,ie版本不支持，苹果和andirod版本支持
</div>
<div class="html5">
html5的历史管理
1，改变hash值进行管理的方法
window.location.hash=ord;
window.onhashchange=function(){
var number=obj[window.location.hash.substring(1)];
2,history
history.pushstate(number,'',obg++);
window.onpopstate=function(ev){
var number=ev.state||'';
}
<div class="html5">
canvas
getcontext('2d')
1,填充、描边（fillStyle,strokeStyle）
2,绘制矩形（fillRect strokeRect clearRect(x,y,长，宽)
3,绘制路径(beginPath src(x,y,r,0,2M,false))
）
4,绘制文本(filltext('文本'x,y,可选的最大的像素宽度)
stroketext('文本',x,y,可选的最大像素宽度)
)
audio:音频（mp3,ogg,wav）
video:视频(mp4,ogg,webm)
embed:标签定义的嵌入的内容
source:定义多个数据来源
</div>
<div class="html5">
datalist
datatime
output
data
month
time
</div>

}

</div>
<div class="html5">
html5 postmessage跨域
</div>
//a.com/index.html
<iframe src="b.com/index.html" id='ifr' frameborder="0"></iframe>
<script>
window.onload=function(){
var ifr=document.getElementById('ifr');
var targetOrigin='http://b.com';
ifr.contentWindow.postmessage('i am there',targetOrigin);
}
</script>
//b.com/index.html
<script>
window.addEventListener('message',function(event){
if(event.origin='http://a.com'){
alert(event.data);
}
},false)
</script>

</body>
</html>

css3和html5的更多相关文章

  1. 五大主流浏览器 CSS3 和 HTML5 兼容性大比拼

    各大主流浏览器对 CSS3 和 HTML5 的支持越来越完善,曾经让多少前端开发人员心碎的IE系也开始拥抱标准.就在前几天,W3C的 HTML5 社区领袖 Shelley 宣布,HTML5的开发工作已 ...

  2. 各大浏览器 CSS3 和 HTML5 兼容速查表

    不知不觉中,支持 CSS3 和 HTML5 的浏览器变得越来越多,甚至包括最新版的 IE,当然,所谓支持仅仅是部分支持,因为 CSS3 和 HTML5 的W3C 规范都尚未形成.如果你现在就希望使用 ...

  3. 基于CSS3和HTML5图片加工前后对比代码

    分享一款CSS3和HTML5图片加工前后对比代码.这是一款通过CSS3和HTML5将图像转换为自动响应的元素:图像缩放和裁剪以适应容器.效果图如下: 在线预览   源码下载 实现的代码. html代码 ...

  4. 【项目1-1】使用HTML5+CSS3绘制HTML5的logo

    作为一个WEB小萌新,自学了有一段时间,总是感觉停滞不前.最近反思中,想到前贤一句话:书读百遍其义自见.说到底,还是项目做的少,如果做多了,想必自然会得心应手. 利用HTML5+CSS3绘制HTML5 ...

  5. 好程序员分享DIV+CSS3和html5+CSS3有什么区别

    DIV+CSS3和html5+CSS3有什么区别,不管是DIV+CSS3还是html5+CSS3,他们都是我们对网页开发布局方式的统称,但是DIV+CSS3作为网页的基础开发这句话其实并不严谨,因为而 ...

  6. 主流浏览器CSS3和HTML5兼容性

    各大主流浏览器对 CSS3 和 HTML5 的支持越来越完善,曾经让多少前端开发人员心碎的IE系也开始拥抱标准.就在前几天,W3C的 HTML5 社区领袖 Shelley 宣布,HTML5的开发工作已 ...

  7. css3、html5学习笔记

    2016/12/14 ----认真看完绝对对你有帮助 HTML5针对移动端,移动端的浏览器主要是chrome,是webkit内核; app(applicatin):应用; native app:原生的 ...

  8. CSS3和HTML5新增特性及使用(保留方便查看)

    CSS3 1.边框图片 border-image: url(test.png) 10/10px;  outline:10px solid #ff0;outline-offset:15px;边框的边框, ...

  9. 教程：让你的表单升级到CSS3和HTML5客户端验证

    今天我们一起来看看如何创建一个实用并且功能强大的表单,表单使用如今最热门的技术HTML5和css3来创建,并且可以通过HTML5进行客户端验证. 查看预览下载附件 第一步:策划表单功能 首先,我们得为 ...

随机推荐

  1. python之vscode中手动选择python解释器(mac)

    要选择特定的解释器,请从命令选项板(⇧⌘P)调用Python:Select Interpreter命令. 更详细请看:http://www.cnblogs.com/it-tsz/p/9312151.h ...

  2. Python学习【第2篇】：Python数据结构

    Python数据结构 1.数字类型 2.字符串 3.列表 4.元组 5.字典 6.集合

  3. Cpython支持的进程与线程

    一.multiprocessing模块介绍 python中的多线程无法利用CPU资源,在python中大部分情况使用多进程.python中提供了非常好的多进程包multiprocessing. mul ...

  4. django 之知识点总结以及Form组件

    一.model常用操作 1.13个API查询:all,filter,get ,values,values_list,distinct,order_by ,reverse , exclude(排除),c ...

  5. yum安装软件内容

    linux  yum源改为阿里yum源 1.备份 mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo.back ...

  6. PLC漏洞问题

    1.PLC采用大多是经过裁剪的实时操作系统,比如像linux RT.QNX.VxWorks等,这些实时操作系统广泛应用在通信.军事.航天.等工程领域,但是随之工业与网络的互连爆发出很多问题,常见的PL ...

  7. C++ Primer 笔记——重载运算

    1.对于二元运算符来说,左侧运算对象传递给第一个参数,而右侧运算对象传递给第二个参数.除了重载的函数调用运算符operator()之外,其他重载元素运算符不能含有默认实参. class test { ...

  8. Python enumerate() 函数

    描述 enumerate() 函数用于将一个可遍历的数据对象(如列表.元组或字符串)组合为一个索引序列,同时列出数据和数据下标,一般用在 for 循环当中. Python 2.3. 以上版本可用,2. ...

  9. 在 Python 中使用 JSON

    在 Python 中使用 JSON 本教程将会教我们如何使用 Python 编程语言编码和解码 JSON.让我们先来准备环境以便针对 JSON 进行 Python 编程. 环境 在我们使用 Pytho ...

  10. BZoj 2301 Problem b（容斥定理+莫比乌斯反演）

    2301: [HAOI2011]Problem b Time Limit: 50 Sec  Memory Limit: 256 MB Submit: 7732  Solved: 3750 [Submi ...