css3和html5的学习
本文是此链接的源代码。http://www.imooc.com/learn/77
关于的html5的使用：
transition----含义是：过渡的过程，能够对各种属性设置变化。
有5中过渡的形式：ease、linear、ease-in、ease-out、ease-in-out。
<!DOCTYPE html>
<html>
<head>
<title>html5 transition</title>
<style type="text/css">
#block_bar1{
width: 40px;
height: 100px;
background-color: #69c;
-webkit-transition:width 5s ease;
}
#block_bar1:hover{
width: 600px;
height: 100px;
background-color: #ff0000;
}
#block_bar2{
width: 40px;
height: 100px;
background-color: #69c;
-webkit-transition:width 5s linear;
}
#block_bar2:hover{
width: 600px;
height: 100px;
background-color: #ff0000;
}
#block_bar3{
width: 40px;
height: 100px;
background-color: #69c;
-webkit-transition:width 5s ease-in;
}
#block_bar3:hover{
width: 600px;
height: 100px;
background-color: #ff0000;
}
#block_bar4{
width: 40px;
height: 100px;
background-color: #69c;
-webkit-transition:width 5s ease-out;
}
#block_bar4:hover{
width: 600px;
height: 100px;
background-color: #ff0000;
}
</style>
</head>
<body>
<div id="block_bar1">
</div>
<div id="block_bar2">
</div>
<div id="block_bar3">
</div>
<div id="block_bar4">
</div>
</body>
</html>
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdHVrdTA4MDE=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">不同的变化形式。
transform-----含义是：改变，使…变形；转换，动词
该行为是html5新添加的一个特性，主要translate（）、rotate（）、scale（）、skew()等属性能够设置出动画。
example1：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
#test{
-webkit-perspective:800;
-webkit-perspective-origin: 50% 50%;
-webkit-transform-style:-webkit-preserve-3d; }
#block{
width: 500px;
height: 500px;
background-color: #69c;
margin: 100px auto;
-webkit-transform:rotateZ(30deg);
} </style>
</head>
<body>
<div id="test">
<div id="block"> </div>
</div>
</body>
</html>
example2：
<!DOCTYPE html>
<html>
<head>
<title>3dRotate</title>
<style type="text/css">
#test{
-webkit-perspective:800;
-webkit-perspective-origin:50% 50%;
-webkit-tranform-style:-webkit-preserve-3d;
}
#block{
width: 200px;
height: 200px;
background-color: #6699cc;
margin:100px auto;
}
#option{
margin: 60px auto;
font-size: 16px;
font-weight: bold;
width: 800px;
}
#option .range-control{width: 700px;}
</style> <script type="text/javascript">
function rotate(){
var x=document.getElementById("rotatex").value;
var y=document.getElementById("rotatey").value;
var z=document.getElementById("rotatez").value;
document.getElementById("block").style.webkitTransform = "rotateX("+x+"deg) rotateY("+y+"deg) rotateZ("+z+"deg)"; document.getElementById("degX-span").innerText =x;
document.getElementById("degY-span").innerText =y;
document.getElementById("degZ-span").innerText =z; }
</script>
</head>
<body>
<div id="test">
<div id="block"></div>
</div>
<div id="option">
<p>rotateX:<span id="degX-span">0</span> degree</p>
<input type="range" min="-360" max="360" id="rotatex" value="0" class="range-control" onMouseMove="rotate()" /><br>
<p>rotateY:<span id="degY-span">0</span> degree</p>
<input type="range" min="-360" max="360" id="rotatey" value="0" class="range-control" onMouseMove="rotate()" /><br>
<p>rotateX:<span id="degZ-span">0</span> degree</p>
<input type="range" min="-360" max="360" id="rotatez" value="0" class="range-control" onMouseMove="rotate()" /><br>
</div>
</body>
</html>
使用transform对translate和rotate进行设置。
最后一个是3维场景的搭建和翻页效果：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#my3dspace{
-webkit-perspective:800;
-webkit-perspective-origin:50% 50%;
overflow: hidden;
}
#pagegroup{
width: 400px;
height: 400px;
margin: 0px auto; -webkit-transform-style:preserve-3d;
position: relative;
}
#op{
text-align: center;
margin:40px auto; }
.page{
width: 360px;
height: 360px;
padding: 20px;
background-color: #000; color: #fff;
font-weight: bold;
font-size: 360px;
line-height: 360px;
text-align: center;
position: absolute;
}
#page1{
-webkit-transform-origin:bottom;
-webkit-transition:-webkit-transform 1s linear;
}
#page2,#page3,#page4,#page5,#page6{
-webkit-transform-origin:bottom;
-webkit-transition:-webkit-transform 1s linear;
-webkit-transform:rotateX(90deg);
}
</style>
<script type="text/javascript">
var curIndex = 1;
function next(){
if(curIndex == 6)
return;
var curPage = document.getElementById("page"+curIndex);
curPage.style.webkitTransform = "rotateX(-90deg)"; curIndex ++;
var nextPage = document.getElementById("page"+curIndex);
nextPage.style.webkitTransform = "rotateX(0deg)";
}
function prev(){
if(curIndex == 1)
return; var curPage = document.getElementById("page"+curIndex);
curPage.style.webkitTransform = "rotateX(90deg)"; curIndex --;
var nextPage = document.getElementById("page"+curIndex);
nextPage.style.webkitTransform = "rotateX(0deg)";
} </script>
</head>
<body>
<div id="my3dspace">
<div id="pagegroup">
<div class="page" id="page1">1</div>
<div class="page" id="page2">2</div>
<div class="page" id="page3">3</div>
<div class="page" id="page4">4</div>
<div class="page" id="page5">5</div>
<div class="page" id="page6">6</div>
</div>
</div>
<div id="op">
<a href="javascript:next()">next</a> <a href="javascript:prev()">previous</a>
</div>
</body>
</html>
css3和html5的学习的更多相关文章
- CSS3与页面布局学习笔记（八）——浏览器兼容性问题与前端性能优化方案
一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...
- html5开发学习 html5自学需要怎么学
记得很多大鳄都说过一句话:只要站在风口上,猪都能飞起来.而对于如今的IT技术领域来说,无疑这只幸运的"猪"非html5莫属.html5开发技术在16年迎来了一个飞跃的发展,这也让很 ...
- CSS3与页面布局学习总结（八）——浏览器兼容与前端性能优化
一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...
- CSS3与页面布局学习总结（四）——页面布局大全
一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...
- 数百个 HTML5 例子学习 HT 图形组件 – 3D建模篇
http://www.hightopo.com/demo/pipeline/index.html <数百个 HTML5 例子学习 HT 图形组件 – WebGL 3D 篇>里提到 HT 很 ...
- 数百个 HTML5 例子学习 HT 图形组件 – 3D 建模篇
http://www.hightopo.com/demo/pipeline/index.html <数百个 HTML5 例子学习 HT 图形组件 – WebGL 3D 篇>里提到 HT 很 ...
- 数百个 HTML5 例子学习 HT 图形组件 – WebGL 3D 篇
<数百个 HTML5 例子学习 HT 图形组件 – 拓扑图篇>一文让读者了解了 HT的 2D 拓扑图组件使用,本文将对 HT 的 3D 功能做个综合性的介绍,以便初学者可快速上手使用 HT ...
- 数百个 HTML5 例子学习 HT 图形组件 – 拓扑图篇
HT 是啥:Everything you need to create cutting-edge 2D and 3D visualization. 这口号是当年心目中的产品方向,接着就朝这个方向慢慢打 ...
- 五大主流浏览器 CSS3 和 HTML5 兼容性大比拼
各大主流浏览器对 CSS3 和 HTML5 的支持越来越完善,曾经让多少前端开发人员心碎的IE系也开始拥抱标准.就在前几天,W3C的 HTML5 社区领袖 Shelley 宣布,HTML5的开发工作已 ...
随机推荐
- 【BZOJ 4596】 4596: [Shoi2016]黑暗前的幻想乡 （容斥原理+矩阵树定理）
4596: [Shoi2016]黑暗前的幻想乡 Time Limit: 20 Sec Memory Limit: 256 MBSubmit: 324 Solved: 187 Description ...
- android 网络
韩梦飞沙 韩亚飞 313134555@qq.com yue31313 han_meng_fei_sha android - async - http 安卓 异步 超文本传输协议 xUtil a ...
- Codeforces Round #479 (Div. 3)
手速场2333,这群人贼牛逼!手速贼快! A. Wrong Subtraction time limit per test 1 second memory limit per test 256 m ...
- 【主席树】BZOJ3524-[Poi2014]Couriers
[题目大意] 给一个长度为n的序列a.1≤a[i]≤n. m组询问,每次询问一个区间[l,r],是否存在一个数在[l,r]中出现的次数大于(r-l+1)/2.如果存在,输出这个数,否则输出0. [思路 ...
- Nginx出现504 Gateway Time-out的解决方案
使用Nginx作为WEB服务器时,经常会遇到504 Gateway Time-out的错误提示.经过研究,基本可以确定多数情况下这个错误与Nginx本身无关,问题的根源在于Nginx将PHP的解析提交 ...
- Android UI设计规范之知识点
界面尺寸 android的尺寸众多,建议使用分辨率为720×1280的尺寸设计.这个尺寸720×1280中显示完美,在1080×1920中看起来也比较清晰;切图后的图片文件大小也适中,应用的内存消耗也 ...
- poj 2342 && hdu 1520 树形dp
题意:有n个人,接下来n行是n个人的价值,再接下来n行给出l,k说的是l的上司是k,这里注意l与k是不能同时出现的 链接:点我 dp[i][1] += dp[j][0], dp[i][0] += ma ...
- bzoj 1468
大概思路:树点分治,重心树中每个重心维护一个总的平衡树,树中保存属于该重心的点到该重心的距离,然后对于去掉该重心后形成的子树分别再保存一份. 用这种方式实现的话,还可以支持修改与多次查询,每次操作都是 ...
- 某DP题目3
题意: 一根数轴上有n只怪物,第i个怪物所在的位置为ai,另有m个特殊点,第i个特殊点所在的位置为bi.你可以对怪物进行移动,若两怪物相邻,那么你不能把他们分开,移动时要看作一个整体.你可以选择向左或 ...
- bzoj2200道路和航线
试题描述 Farmer John 正在一个新的销售区域对他的牛奶销售方案进行调查.他想把牛奶送到 T (1≤T≤2.5×10^4)个城镇 ,编号为 1 到 T.这些城镇之间通过 R 条道路(编号为 1 ...