HTML5移动开发学习笔记之CSS3基础学习

  CSS回顾

 在学CSS3之前首先巩固下CSS的基础知识。

1.CSS框模型

 

举例子:

 #box { width: 70px; margin: 10px; padding: 5px; }

这个代码将出现的效果是:

 

2.CSS定位与浮动

 1)定位:

属性 描述
 position 把元素放到一个静态的(static:元素框正常生成),相对的(relative:元素框偏移某个距离[相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普通流中的位置]),绝对的(absolute:元素框从文档流完全删除,并相对于其包含块定位),或固定(fixed:元素框的表现类似于absolute,不过其包含块的视窗本身)的位置中
 top,right,bottom,left 定义一个元素的上,右,下,左外边距边界与其包含块上,右,下,左边界之间的距离。注:如果position的属性值为"static",则不会有任何效果。
 overflow 设置当元素内容溢出其区域发生的事。overflow: scroll(显示滚动条)|hidden(隐藏)|auto(浏览器自动处理)
 clip 设置元素的形状,元素被剪入这个形状之中 rect (top, right, bottom, left)
 vertical-align 设置元素的垂直对齐方式。如:vertical-align:text-top;把元素的顶端与父元素字体的顶端对齐
 z-index  设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面(1>0>-1) 注:Z-index 仅能在定位元素上奏效(例如 position:absolute;)!

 看下对这些知识点的练习:

  效果:

代码:

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>无标题文档</title>
 6 <style type="text/css">
 7 h2.pos_left
 8 {
 9 position:relative;
10 left:-20px;
11 top:-20px;
12 }
13 h2.pos_right
14 {
15 position:relative;
16 left:20px;
17 top:20px;
18 }
19 h2.pos_absleft
20 {
21 position:absolute;
22 left:280px;
23 top:30px;
24 color:red
25 }
26 h2.pos_absright
27 {
28 position:absolute;
29 left:-10px;
30 top:90px;
31 color:red
32 }
33 h2.one
34 {
35 position:fixed;
36 left:15px;
37 top:235px;
38 }
39 h2.two
40 {
41 position:fixed;
42 top:30px;
43 right:15px;
44 }
45 #over 
46 {
47 background-color:#00FFFF;
48 width:150px;
49 height:150px;
50 overflow: auto
51 }
52 </style>
53 </head>
54 
55 <body>
56 <p>1.绝对定位和相对定位的区别:
57 </p>
58 <h2>这是正常位置</h2>
59 <h2 class="pos_left">相对定位1</h2>
60 <h2 class="pos_right">相对定位2</h2>
61 <h2 class="pos_absleft">绝对定位的移动1</h2>
62 <h2 class="pos_absright">绝对定位的移动2</h2>
63 </body>
64 <hr />
65 <p>2.固定定位:
66 </p>
67 <h2 class="one">固定定位测试1。</h2>
68 <h2 class="two">固定定位测试2。</h2>
69 <p>&nbsp;</p>
70 <hr />
71 <p>3.overflow的使用:overflow: scroll(显示滚动条)|hidden(隐藏)|auto(浏览器自动处理)
72 </p>
73 <div id="over">
74 这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll,不论是否需要,用户代理都会提供一种滚动机制。因此,有可能即使元素框中可以放下所有内容也会出现滚动条。默认值是 visible。
75 </div>
76 </html>
View Code

2)浮动:

 W3School上讲解的浮动较简单,不过也有些不太好理解。借鉴http://www.jb51.net/css/67471.html 这篇文章,对浮动有了点理解。

  浮动:浮动的框可以左右移动,直至它的外边缘遇到包含框或者另一个浮动框的边缘。浮动框不属于文档中的普通流,当一个元素浮动之后,不会影响到 块级框的布局而只会影响内联框(通常是文本)的排列,文档中的普通流就会表现得和浮动框不存在一样,当浮动框高度超出包含框的时候,也就会出现包含框不会 自动伸高来闭合浮动元素(“高度塌陷”现象)。顾名思义,就是漂浮于普通流之上,像浮云一样,但是只能左右浮动。 
正是因为浮动的这种特性,导致本属于普通流中的元素浮动之后,包含框内部由于不存在其他普通流元素了,也就表现出高度为0(高度塌陷)。在实际布局中,往往这并不是我们所希望的,所以需要闭合浮动元素,使其包含框表现出正常的高度。

我们先来看下高度塌陷的现象:

 

代码为:

<style type="text/css">
.news {
  background-color: gray;
  border: solid 1px black;
  }

.news img {
  float: left;
  }

.news p {
  float: right;
  }

</style>
</head>
<body>
<p>①因为浮动表现出高度为0(高度塌陷)的现象:
</p>
<div class="news" width="50px">
<img src="XiaoKeAi.jpg" />
<p>这是文本</p>
<p>这是文本</p>
<p>这是文本</p>
</div>
</body>

然后看下清理浮动的方法:

 ①添加额外标签的效果:

代码:

<style type="text/css">
.clear {
  clear: both;
  }
</style>
</head>
<body>
<p>①添加额外标签消除高度塌陷的现象:
</p>
<div class="news" width="50px">
<img src="XiaoKeAi.jpg" />
<p>这是文本</p>
<p>这是文本</p>
<p>这是文本</p>
<div class="clear"></div>
</div>
</body>

 ②使用 br标签和其自身的 html属性 (这个方法有些小众,br 有 clear=“all | left | right | none” 属性) 【效果如上述方法一样,亲测通过】

代码:

<body>
<p>②使用br标签和其自身的 html属性消除高度塌陷的现象:
</p>
<div class="news" width="50px">
<img src="XiaoKeAi.jpg" />
<p>这是文本</p>
<p>这是文本</p>
<p>这是文本</p>
<br clear="all" /> 
</div>
</
body>

③父元素设置 overflow:hidden

 通过设置父元素overflow值设置为hidden;在IE6中还需要触发 hasLayout ,例如 zoom:1(试了下,这里可以不需要的);【效果如上述方法一样,亲测通过】

代码:

<body>
<p>③父元素设置 overflow:hidden 消除高度塌陷的现象:
</p>
<div class="news" width="50px" style="overflow:hidden;*zoom:1;" >
<img src="XiaoKeAi.jpg" />
<p>这是文本</p>
<p>这是文本</p>
<p>这是文本</p>
</div>
</body>

④父元素设置 overflow:auto 属性

将上述的style="overflow:hidden;" 这行代码改为style="overflow:auto;"

⑤父元素也设置浮动

效果有点不一样:

代码只在这里变动了:

.news {
  background-color: gray;
  border: solid 1px black;
    float: left;
  }

⑥父元素设置display:table
效果跟上述⑤是一样一样滴~~

代码只在这里变动了:

.news {
  background-color: gray;
  border: solid 1px black;
  display:table;
  }

⑦使用:after伪元素【注:after是伪元素,不是伪类】(听说这种方法是最好滴~~)

效果跟方法①是一样的~

增加了这个代码:

.news:after {content:"."; display:block; height:0; visibility:hidden; clear:both; } 

3.CSS选择器

 元素选择器,选择器分组,类选择器,ID选择器,属性选择器,后代选择器,子元素选择器,相邻兄弟选择器这些知识点已经在W3School回顾温习了下,不记录了。主要学习下CSS 伪类,CSS伪元素。

 1)CSS伪类

  ①锚伪类

a:link {color: #FF0000}		/* 未访问的链接 */
a:visited {color: #00FF00}	/* 已访问的链接 */
a:hover {color: #FF00FF}	/* 鼠标移动到链接上 */
a:active {color: #0000FF}	/* 选定的链接 */

 注:a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的;a:active 必须被置于 a:hover 之后,才是有效的。伪类名称对大小写不敏感。

 ②:focus伪类 

 向拥有键盘输入焦点的元素添加样式。

 ③:first-child伪类

   :first-child 伪类来选择元素的第一个子元素,特定伪类很容易遭到误解,最常见的错误是认为 p:first-child 之类的选择器会选择 p 元素的第一个子元素(我就是这样错误的认为( ╯□╰ )) 实际上却是选择器匹配作为任何元素的第一个子元素的 p 元素。

 ④:lang伪类

 :lang 伪类使你有能力为不同的语言定义特殊的规则。

综合练习下: 效果如下

 

代码:

 1 <html>
 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 3 <head>
 4 <style type="text/css">
 5 a:link {color: #FF0000}
 6 a:visited {color: #00FF00}
 7 a:hover {color: #FF00FF}
 8 a:active {color: #0000FF}
 9 input:focus
10 {
11 background-color:yellow;
12 }
13 p > i:first-child {
14   font-weight:bold;
15   }
16   q:lang(no)
17    {
18    quotes: "~" "~"
19    }
20 </style>
21 </head>
22 
23 <body>
24 <p>1.锚伪类的应用:<br />
25 <b><a href="/index.html" target="_blank">这是一个链接。</a></b>
26 </p>
27 <p>2.focus伪类的应用:<br />
28 First name: <input type="text" name="fname" />
29 </p>
30 <p>3.first-child伪类的应用:<br />
31 <p>some <i>text</i>. some <i>text</i>.</p>
32 <p>some <i>text</i>. some <i>text</i>.</p>
33 </p>
34 <p>4. lang 伪类的应用:<br />
35 <p>文字<q lang="no">段落中的引用的文字</q>文字</p>
36 </p>
37 </body>
38 </html>
View Code

2)CSS伪元素

 ①:first-line 伪元素

   "first-line" 伪元素用于向文本的首行设置特殊样式。"first-line" 伪元素只能用于块级元素。

 ②:first-letter 伪元素

   "first-letter" 伪元素用于向文本的首字母设置特殊样式。

 ③:before 伪元素

   ":before" 伪元素可以在元素的内容前面插入新内容。

 ④:after 伪元素

   ":after" 伪元素可以在元素的内容之后插入新内容。

综合练习下:效果如下

代码:

 1 <html>
 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 3 <head>
 4 <style type="text/css">
 5 p:first-line 
 6 {
 7 color: #ff0000;
 8 font-variant: small-caps
 9 }
10 h5:first-letter 
11 {
12 color: #ff0000;
13 font-size:xx-large
14 }
15 h3:before
16 {
17 content:"台词:";
18 }
19 h4:after
20 {
21 content:"- 台词";
22 }
23 </style>
24 </head>
25 
26 <body>
27 1.first-line 伪元素的应用:<br />
28 <p>
29 You can use the :first-line pseudo-element to add a special effect to the first line of a text!
30 </p>
31 2.first-letter 伪元素的应用:<br />
32 <h5>
33 You can use the :first-line pseudo-element to add a special effect to the first line of a text!
34 </h5>
35 3.:before 伪元素的应用:<br />
36 <h3>我是唐老鸭。</h3>
37 <h3>我住在 Duckburg。</h3>
38 
39 4.:after伪元素的应用:<br />
40 <h4>我是唐老鸭。</h4>
41 <h4>我住在 Duckburg。</h4>
42 </body>
43 </html>
View Code

 小结下:伪类和伪元素有什么区别呢?做的时候就在想。。。又发现好文章一枚 http://m.blog.csdn.net/blog/zhuizhuziwo/7897837

 【伪类:作用对象是整个元素 ;伪元素:作用于元素的一部分】

  CSS3学习

 CSS3完全向后兼容,因此不必改变现有的设计。CSS3被划分为模块,最重要的CSS3模块包括:

  1)选择器;2)框模型; 3)背景和边框;4)文本效果;5)2D/3D转换;6)动画;7)多列布局;8)用户界面

 下面学习其中的一些模块:

1.背景和边框

 1)CSS3背景

   CSS3包含多个新的背景属性,下面我们看下这三个属性

属性 描述
background-size 绘制背景图片的尺寸,可以以像素或百分比(相对于父元素的宽度和高度)规定尺寸
background-origin 规定背景图片的定位区域,可以放置于 content-box、padding-box 或 border-box 区域(这些区域的分布见附图1)
background-clip 规定背景的绘制区域,语法:background-clip: border-box|padding-box|content-box;

 2)CSS3边框

   通过 CSS3能够创建圆角边框,向矩形添加阴影,使用图片来绘制边框。学习下实现这些效果的这三个属性

属性 描述
border-image 设置所有border-image-*属性的简写属性,看了W3school的介绍觉得有些还没弄懂,再认真看了http://www.jb51.net/css/27855.html和http://www.jb51.net/css/38358.html这两篇文章。
border-radius  设置所有四个 border-*-radius 属性的简写属性。
border-shadow 向方框添加一个或多个阴影,语法box-shadow: h-shadow v-shadow blur spread color inset;说明:h-shadow 水平阴影的位置,允许负值。v-shadow 垂直阴影的位置,允许负值。blur 模糊距离。spread 阴影的尺寸。color 阴影的颜色。inset 将外部阴影改为内部阴影。

 附图1:

 

 看个综合的练习:

 效果:

 代码:

  1 <!DOCTYPE html>
  2 <html>
  3 <meta charset="utf-8" />
  4 <head>
  5 <style type="text/css">
  6 #div1
  7 {
  8 background:url(XiaoKeAi.jpg);
  9 background-size:100px 180px;
 10 background-repeat:no-repeat;
 11 padding-top:180px;
 12 }
 13 #div3
 14 {
 15 border:1px solid black;
 16 width:200px;
 17 height:200px;
 18 padding:50px;
 19 background:url(XiaoKeAi.jpg);
 20 background-repeat:no-repeat;
 21 background-position:left;
 22 background-origin:border-box;
 23 }
 24 #div4
 25 {
 26 border:1px solid black;
 27 width:200px;
 28 height:200px;
 29 padding:50px;
 30 background:url(XiaoKeAi.jpg);
 31 background-repeat:no-repeat;
 32 background-position:left;
 33 background-origin:content-box;
 34 }
 35 #div5
 36 {
 37 width:200px;
 38 height:200px;
 39 padding:50px;
 40 background-color:yellow;
 41 background-clip:border-box;
 42 border:2px solid #92b901;
 43 }
 44 #div6
 45 {
 46 width:200px;
 47 height:200px;
 48 padding:50px;
 49 background-color:yellow;
 50 background-clip:content-box;
 51 border:2px solid #92b901;
 52 }
 53 #div7
 54 {
 55 width:250px;
 56 height:100px;
 57 background-color:#ff9900;
 58 -moz-box-shadow: 10px 10px 5px #888888; /* 老的 Firefox */
 59 box-shadow: 10px 10px 5px #888888;
 60 }
 61 #div8
 62 {
 63 text-align:center;
 64 border:2px solid #a1a1a1;
 65 padding:10px 40px; 
 66 background:#dddddd;
 67 width:250px;
 68 border-radius:25px;
 69 -moz-border-radius:25px; /* 老的 Firefox */
 70 }
 71 #div9
 72 {
 73 border:15px solid transparent;
 74 width:250px;
 75 padding:10px 20px;
 76 -moz-border-image:url(border.jpg) 30 30 round;    /* Old Firefox */
 77 -webkit-border-image:url(border.jpg) 30 30 round;    /* Safari and Chrome */
 78 -o-border-image:url(border.jpg) 30 30 round;        /* Opera */
 79 border-image:url(border.jpg) 30 30 round;
 80 }
 81 #div10
 82 {
 83 border:15px solid transparent;
 84 width:250px;
 85 padding:10px 20px;
 86 -moz-border-image:url(border.jpg) 30 30 stretch;    /* Old Firefox */
 87 -webkit-border-image:url(border.jpg) 30 30 stretch;    /* Safari and Chrome */
 88 -o-border-image:url(border.jpg) 30 30 stretch;        /* Opera */
 89 border-image:url(border.jpg) 30 30 stretch;
 90 }
 91 </style>
 92 </head>
 93 <body>
 94 <table>
 95 <tr width="500px">
 96 <th width="250px">
 97 <p>1,看下background-size的效果:</p>
 98 <div id=div1>拉伸的背景图片</div>
 99 </th>
100 <th width="250px">
101 <p>&nbsp;</p>
102 <div id=div2>原始图片:<img src="XiaoKeAi.jpg" width="200" height="200" alt="小可爱"></div>
103  </th>
104  </tr>
105  
106 <tr width="500px">
107 <th >
108 <p>2,看下background-origin的效果:</p>
109 <p>background-origin:border-box:</p>
110 <div id="div3">
111 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
112 </div>
113 </th>
114 
115 <th>
116 <p>&nbsp;</p>
117 <p>background-origin:content-box:</p>
118 <div id="div4">
119 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
120 </div>
121 </th>
122 
123 </tr>
124 
125 <tr width="500px">
126 <th>
127 <p>3,看background-clip的效果:</p>
128 <p>background-clip:border-box:</p>
129 <div id="div5">
130 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
131 </div>
132 </th>
133 <th>
134 <p>&nbsp;</p>
135 <p>background-clip:content-box:</p>
136 <div id="div6">
137 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
138 </div>
139 </th>
140 </tr>
141 <tr width="500px">
142 <th>
143 <p>4,看CSS3边框属性的圆角和阴影效果:</p>
144 <p>background-clip:border-box:</p>
145 <div id="div7">
146 </div>
147 </th>
148 <th>
149 <p>&nbsp;</p>
150 <p>background-clip:content-box:</p>
151 <div id="div8">
152 border-radius 属性允许您向元素添加圆角。
153 </div>
154 </th>
155 </tr>
156 <tr width="500px">
157 <th>
158 <p>5,看CSS3边框图片效果:</p>
159 <p>图片铺满整个边框:</p>
160 <div id="div9"> 在这里,图片铺满整个边框。
161 </div>
162 </th>
163 <th>
164 <p>&nbsp;</p>
165 <p>图片被拉伸以填充该区域:</p>
166 <div id="div10">
167 在这里,图片被拉伸以填充该区域。
168 </div>
169 </th>
170 </tr>
171 </body>
172 </html>
View Code

2.文本效果和字体应用

   1)文本效果

  新的文本属性挺多,这里介绍下text-shadow和text-wrap

属性 描述
text-shadow 向文本设置阴影,语法:text-shadow: h-shadow v-shadow blur color;
word-wrap 允许长单词换行到下一行,语法:word-wrap: normal|break-word; normal 表示只在允许的断字点换行(浏览器保持默认处理)。break-word 在长单词或 URL 地址内部进行换行。

   2)CSS3字体

    在CSS3之前,Web设计师必须使用已在用户计算机上安装的字体。通过CSS3,Web设计师可以使用任意字体(将该字体存放到web服务器上,它会在需要时自动下载到用户的计算机上)

   介绍下 @font-face 规则中定义的所有字体描述符:

   ①font-family 规定字体的名称; ② src 定义字体文件的 URL; ③font-stretch 定义如何拉伸字体 ④font-style 定义字体的样式; ⑤font-weight 定义字体的粗细 ;⑥unicode-range 定义字体支持的 UNICODE 字符范围。默认是 "U+0-10FFFF"。

 看下综合的练习:

代码:

 1 <!DOCTYPE html>
 2 <html>
 3 <meta charset="utf-8" />
 4 <head>
 5 <style>
 6 h1
 7 {
 8 text-shadow: 5px 5px 5px #FF0000;
 9 }
10 p.test
11 {
12 width:11em; 
13 border:4px solid #000000;
14 }
15 p.test1
16 {
17 width:11em; 
18 border:4px solid #000000;
19 word-wrap:break-word;
20 }
21 @font-face
22 {
23 font-family: myFirstFont;
24 src: url('Sansation_Regular.ttf')
25     ,url('Sansation_Regular.eot'); /* IE9+ */
26 }
27 @font-face
28 {
29 font-family: myFirstFont;
30 src: url('Sansation_Regular.ttf'); /* IE9+ */    
31     font-weight:bold;  /* 为了使字体变粗,须为粗体文本添加另一个包含描述符的 @font-face:可是为毛我这里没管用,RP问题? */
32 }
33 #div1
34 {
35 font-family:myFirstFont;
36 }
37 </style>
38 </head>
39 <body>
40 
41 <h1>文本阴影效果!</h1>
42 <p class="test">没有换行的效果 This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p>
43 <p class="test1">换行的效果 This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p>
44 <div id="div1">
45 字体的应用:
46 With <b>CSS3</b>, websites can finally use fonts other than the pre-selected "web-safe" fonts. This
47 </div>
48 <p><b>注释:</b>Internet Explorer 9+ 支持新的 @font-face 规则。Internet Explorer 8 以及更早的版本不支持新的 @font-face 规则。</p>
49 </body>
50 </html>
View Code

3.2D转换

   在这一小节中,我们将学到2D转换的几种方法

函数 描述
translate(x,y) 定义 2D 转换,沿着 X 和 Y 轴移动元素。扩展translateX(n)和translateY(n),意思分别是沿着x,y轴移动元素
scale(x,y) 定义 2D 缩放转换,改变元素的宽度和高度。扩展scaleX(n),scaleY(n)
rotate(angle) 定义 2D 旋转,在参数中规定角度。
skew(x-angle,y-angle) 定义 2D 倾斜转换,沿着 X 和 Y 轴。扩展skewX(angle),skewY(angle)
matrix(n,n,n,n,n,n) 定义 2D 转换,使用六个值的矩阵。

 看下综合练习的效果:

代码:

 1 <!DOCTYPE html>
 2 <html>
 3 <meta charset="utf-8" />
 4 <head>
 5 <style> 
 6 div
 7 {
 8 width:100px;
 9 height:105px;
10 background-color:yellow;
11 border:1px solid black;
12 }
13 div#div1
14 {
15 transform:translate(100px,10px);
16 
17 }
18 div#div2
19 {
20 /* Rotate div */
21 transform:rotate(30deg);
22 float:left;
23 }
24 div#div3
25 {
26 margin:100px;/*注意这里的运用,这似乎可以看出基点所在*/
27 transform:scale(2,2);
28 float:left;
29 }
30 div#div4
31 {
32 transform:skew(10deg,20deg);
33 float:left;
34 }
35 div#div5
36 {
37 transform:matrix(0.866,0.5,-0.5,0.866,0,0);
38 float:left;
39 }
40 </style>
41 </head>
42 <body>
43 <div id="div1">Hello1,我是translate()方法,沿X轴移动100px,Y移动10px</div>
44 <div id="div2">Hello2,我是rotate()方法,旋转了30度</div>
45 <div id="div3">Hello3,我是scale()方法 把宽度和高度转换为原始尺寸的 2 倍。</div>
46 <div id="div4">Hello4,我是skew()方法 围绕 X 轴把元素翻转 10 度,围绕 Y 轴翻转 20 度。</div>
47 <div id="div5">Hello5,我是skew()方法,使用六个值的矩阵。</div>
48 </body>
49 </html>
View Code

4.3D转换

3D转换的方法包含了2D转换的哪些方法,不过加了Z轴。所以转换的效果是不同,3D立体嘛。。。

看下3D转换方法中使用这两个方法 rotateX();rotateY()的效果:

代码:

 1 <!DOCTYPE html>
 2 <html>
 3 <meta charset="utf-8" />
 4 <head>
 5 <style> 
 6 div
 7 {
 8 width:100px;
 9 height:105px;
10 background-color:yellow;
11 border:1px solid black;
12 }
13 div#div1
14 {
15 transform:rotateX(120deg);
16 float:left;
17 }
18 div#div2
19 {
20 transform:rotateY(130deg);
21 float:left;
22 }
23 </style>
24 </head>
25 <body>
26 <div id="div">Hello,我是标准。看下其他两种方法旋转的效果</div>
27 <div id="div1">Hello1,我是rotateX()方法,围绕X轴旋转120度</div>
28 <div id="div2">Hello2,我rotateY()方法,围绕Y轴旋转130度</div>
29 </body>
30 </html>
View Code

5.过渡

 CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。这种效果像动画挺好玩的~~【原来就是CSS3中的动画( ╯□╰ )】

举例:

 

请把鼠标指针放到黄色的 div 元素上,来查看过渡效果。

关键代码:

div
{
width:100px; transition: width 2s; } div:hover { width:300px; }

可以看出这个transition属性起的作用,学习下它。

语法:transition: property  duration  timing-function  delay;

属性 描述
transition-property 规定应用过渡的 CSS 属性的名称
transition-duration 定义过渡效果花费的时间。默认是 0。
transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"。语法:transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-
bezier(n,n,n,n); 说明下ease的描述,ease:规定慢速开始,然后变快,然后慢速结束的过渡效果(等于cubic-bezier(0.25,0.1,0.25,1))。
transition-delay 规定过渡效果何时开始。默认是 0。

6.动画

  动画是使元素从一种样式逐渐变化为另一种样式的效果。

CSS3 动画

举例:

 
 
 
 
关键代码:
@keyframes myfirst 
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:50px; top:0px;}
50% {background:blue; left:50px; top:50px;}
75% {background:green; left:0px; top:50px;}
100% {background:red; left:0px; top:0px;}
}
div { width:50px; height:50px; background:red; position:relative; animation:myfirst 5s linear 2s infinite alternate; }

 可以看出,首先用@keyframes 规则创建动画,

  上述的myfirst 规则中 百分比是来规定动画在某个时间段做的事情,0% 是动画的开始,100% 是动画的完成(也可以用关键词"from" 和 "to",等同于 0% 和 100%。)
 
 再来看animation属性
 语法:animation: name  duration  timing-function  delay  iteration-count  direction;
描述
animation-name 规定需要绑定到选择器的 keyframe 名称。
animation-duration 规定完成动画所花费的时间,以秒或毫秒计。
animation-timing-function 规定动画的速度曲线。默认值:ease(跟上述的过渡是一样的)
animation-delay 规定在动画开始之前的延迟。值以秒或毫秒计。
animation-iteration-count 定义动画的播放次数 infinite 表示无限次
animation-direction 规定是否应该轮流反向播放动画 alternate表示轮流反向播放
7.多列
  能够创建多个列来对文本进行布局 - 就像报纸那样!
 主要是这三个属性的应用
  ①column-count  规定元素应该被分隔的列数。
  ②column-gap 规定列之间的间隔。
  ③设置所有 column-rule-* 属性的简写属性。语法column-rule: column-rule-width column-rule-style column-rule-color;
8.用户界面
在 CSS3 中,新的用户界面特性包括重设元素尺寸、盒尺寸以及轮廓等.
   ①resize  规定是否可由用户调整元素尺寸。 语法:resize: none|both|horizontal|vertical; 对应意思为:用户无法调整元素尺寸|可调高度和宽度|可调宽度|可调高度
   ②box-sizing 确切的方式定义适应某个区域的具体内容  语法:box-sizing: content-box|border-box|inherit;
   ③outline-offset  对轮廓进行偏移,并在超出边框边缘的位置绘制轮廓。语法:outline-offset: length(轮廓与边框边缘的距离)|inherit(从父元素继承 outline-offset 属性的值);
posted @ 2014-03-28 17:17 wj704 阅读(...) 评论(...) 编辑 收藏