<!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. Ubuntu16.04安装MySQL

      本篇教程在示例步骤中使用了以下版本的软件.操作时,请您以实际软件版本为准. 操作系统:Ubuntu 16.04.3 LTS (GNU/Linux 4.4.0-105-generic x86_64) ...

  2. bat如何实现图片与名字匹配重命名

    背景:有一批图片按顺序截取,需要按照规定的名称进行重名命. 问题:用批处理怎么实现呢?(公司电脑手动重名时,卡的不要不要的) No1:解决:将规定的名称放入criterion.txt中,将批处理Ren ...

  3. ionic2 子页面隐藏去掉底部tabs导航，子页面全占满显示方法(至今为止发现的最靠谱的方法)

    项目中遇到 tabs 字页面 可以用以下代码隐藏的方式: imports: [ BrowserModule, // IonicModule.forRoot(MyApp), HttpModule, Io ...

  4. python并发编程之多进程1-----------互斥锁与进程间的通信

    一.互斥锁 进程之间数据隔离,但是共享一套文件系统,因而可以通过文件来实现进程直接的通信,但问题是必须自己加锁处理. 注意:加锁的目的是为了保证多个进程修改同一块数据时,同一时间只能有一个修改,即串行 ...

  5. java子类继承关系

    1.java的类按照继承关系的树形结构所有的类其根节点都是object类,一个类有两种重要的成员,一是变量 .二是方法.子类继承不能继承父类中被声明为private的变量和方法. public cla ...

  6. Python操作MySQL案例

    最近都在学习Python代码,希望学会Python后,能给我带来更高的工作效率,所以每天坚持学习和拷代码,下面是一个Python操作MySQL的一个实例,该实例可以让更多的人更好了解MySQLdb模块 ...

  7. fastJson常用方法总结

    1.了解json json就是一串字符串 只不过元素会使用特定的符号标注. {} 双括号表示对象 [] 中括号表示数组 "" 双引号内是属性或值 : 冒号表示后者是前者的值(这个值 ...

  8. centos7.4/rehat7.0系统安装

    以下是安装过程:(图解),以下是rehat为例 这里可以改为centos的镜像 之后就可以用了,记得做快照!!! 拓展:分离使用 效果:

  9. 获取访问IP

    public static String GetIP() { String ip = HttpContext.Current.Request.ServerVariables["HTTP_X_ ...

  10. Lua中assert( )函数的使用

    当Lua遇到不期望的情况时就会抛出错误,比如:两个非数字进行相加:调用一个非函数的变量:访问表中不存在的值等.你也可以通过调用error函数显示的抛出错误,error的参数是要抛出的错误信息. ass ...