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的开发工作已 ...

随机推荐

Hibernate hql（hibernate query language）基础查询
在开发过程中,数据库的操作我们其实更多的用到的是查询功能,今天开始学习hql的查询. 1.加入必要的工具 2.Hibernate配备的一种非常强大的查询语言,这种查询语言看上去很像sql.但是不要被语 ...
SPOJ1557 GSS2
不知道第几次回顾了,每次回顾感觉都有新的收获这题YYZ认为非常的简单,我们一起去%%%她吧(洛谷$id: 54050$) 题面给出$n$个数,有$q$个询问,求最大子段和,注意相同的数只算一次做 ...
判断一个js对象是不是数组
//今天突然想到一个问题,如何判断一个对象是不是数组 var arr = [0, 1, 2]; console.log(arr) //object, 显然不行 //查阅了很多资料,发现几个挺不错的方法 ...
[转]怎么把一个textview的背景图片设置成圆角的？
在drawable文件夹下新建一个文件设置背景样式代码:在drawable文件夹下面新建text_view_border.xml<?xml version="1.0" ...
HDU 5654 xiaoxin and his watermelon candy 离线树状数组区间不同数的个数
xiaoxin and his watermelon candy 题目连接: http://acm.hdu.edu.cn/showproblem.php?pid=5654 Description Du ...
zoj 3621 Factorial Problem in Base K 数论 s!后的0个数
Factorial Problem in Base K Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.zju.edu.cn/onli ...
Petuum - Careers
Petuum - Careers Cloudformation
IOS开发自定义CheckBox控件
IOS本身没有系统的CheckBox组件,但是实际开发中会经常用到,所以专门写了一个CheckBox控件,直接上代码效果图: UICheckBoxButton.h文件如下: #import #imp ...
Generate stabilized PWM signals
A standard technique for generating analog voltages using µCs is to use a PWM output and filter the ...
mysql sql长度限制解决
mysql sql长度限制解决今天发现了一个错误: Could not execute JDBC batch update 最后发现原因是SQL语句长度大于1M,而我机器上的mysql是 ...

css3和html5的学习

css3和html5的学习的更多相关文章

随机推荐

热门专题