<!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. -Dmaven.multiModuleProjectDirectory system property is not set.

    1.配置 maven 环境变量 新建系统变量 -> 变量名(N): M2_HOME 变量值(V): D:\apache-maven-3.5.4(改为自己的maven目录) -> 添加 pa ...

  2. ORA-00257: archiver error. Connect internal only, until freed.| Oracle数据库归档日志满导致应用系统反应缓慢的问题处理

    一:查看原因 查看了下V$FLASH_RECOVERY_AREA_USAGE,看看归档目录使用的情况.果然是归档满了. Disconnected from Oracle Database 11g En ...

  3. Confluence 6 管理 Atlassian 提供的 App

    Confluence 用户可以使用桌面应用来编辑一个已经上传到 Confluence 的文件,然后这个文件自动保存回 Confluence. 这个下载和上传的过程是通过 Atlassian Compa ...

  4. Confluence 6 Confluence 安装目录

    Confluence 安装的目录(Confluence Installation directory)定义的是 Confluence 是在那里进行安装的.这个目录有时候也被称为 Confluence ...

  5. iOS ibeacon 使用详解

    前段时间写项目,设计到了通过蓝牙ibeacon 的方式接收数据,最开始自己都之前都没听过什么叫ibeacon,然后就开始查资料,慢慢的也了解并知道了ibeacon怎么使用了.先大概解释下ibeacon ...

  6. leetcode(js)算法之696计数二进制串

    给定一个字符串 s,计算具有相同数量0和1的非空(连续)子字符串的数量,并且这些子字符串中的所有0和所有1都是组合在一起的. 重复出现的子串要计算它们出现的次数. 示例: 输入: "0011 ...

  7. linux之xxx 不在 sudoers 文件中，此事将被报告(转载）

    linux中创建用户命令为:useradd 用户名, eg: useradd test 指定密码:passwd test 但是有时候我们需要使用test运行执行一些root用户才有权限执行的命令,此时 ...

  8. ubuntu MySQL配置文件

    查看配置文件: locate my.cnf 查看配置文件路径: /记得要在配置环境变量后执行下列命令 which mysqld /usr/local/mysql/bin/mysqld --verbos ...

  9. bzoj 1002

    表示我这种蒟蒻面对这种递推第一思想显然是打表啊 先贴个用来打表的暴力: #include <cstdio> struct node {     int l,r; }p[]; ]; ]; i ...

  10. C++ GetUserName()

    关于函数“GetUserName()”,参见:https://msdn.microsoft.com/en-us/library/windows/desktop/ms724432(v=vs.85).as ...