<!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. SqlBulkCopy 之 Received an invalid column length from the bcp client for colid 5.

    SqlBulkCopy 批量复制报错: Received an invalid column length from the bcp client for colid 5. 翻译:从bcp客户端收到一 ...

  2. 学习promise

    总概括 promise是js异步编程的一种解决方案 我对promise的认识(通俗):给一个承诺promise,如果未来发生的事情(异步操作)是符合满足相应条件,则接受resolve,否则失败reje ...

  3. 注册InstallShield

    安装InstallShield 下载installshield limitededition版本,这个版本是免费的 注册 安装打开后会给一个网址要求进行注册 其中,国籍是必填项但是下拉菜单中没有内容, ...

  4. Confluence 6 针对站点维护使用只读模式

    如果你需要对 Confluence 进行维护,但是 Confluence 还是在运行或者你计划将站点合并到一个新的站点,你可以将你的 Confluence 站点设置为只读模式来限制用户在你站点中可以使 ...

  5. ionic3 出现莫名广告

    应用上线出现 有莫名其妙的广告弹出. 1,DNS被劫持 2,第三方包带广告 3,Http被劫持 wifi和4G网都出现了广告,所以可以直接排除DNS被劫持的问题 广告页只会在H5的页面出现,所以基本可 ...

  6. <a>之间怎么放值</a> 挺简单的，第一次遇到···

    需求描述:对列表中的某一列内容添加a标签(其实就是对td标签下添加a标签了). 思路简介:拿到这个我首先的反应就是在td标签对text获取内容的代码中动态拼接<a></a>字符 ...

  7. Python基础之递归函数与二分法

    一.递归函数 定义: 在函数内部,可以调用其他函数.如果一个函数在内部调用自身本身,这个函数就是递归函数. 我们来举个例子吧,比如:有个人问“egon”年龄,他说比“小大”大5岁,“小大”又说比“小保 ...

  8. servlet 遇到的奇怪问题

    一. servlet URl 连接多了 %09 原因value里面多了个空格 value=" value'; 改成 value="value'; 二.servlet get方法可以 ...

  9. 论文阅读笔记三：R2CNN：Rotational Region CNN for Orientation Robust Scene Text Detection(CVPR2017)

    进行文本的检测的学习,开始使用的是ctpn网络,由于ctpn只能检测水平的文字,而对场景图片中倾斜的文本无法进行很好的检测,故将网络换为RRCNN(全称如题).小白一枚,这里就将RRCNN的论文拿来拜 ...

  10. 史上最简单的SpringCloud教程 | 第二篇: 服务消费者（rest+ribbon）

    在上一篇文章,讲了服务的注册和发现.在微服务架构中,业务都会被拆分成一个独立的服务,服务与服务的通讯是基于http restful的.Spring cloud有两种服务调用方式,一种是ribbon+r ...