css3?真的很强大。过去，我们需要图像或一堆javascript代码行才能产生简单的过渡效果。如今，我们仅使用css3就可以做到这一点。
在本教程中，我们将向您展示如何使用css3简单地创建具有各种过渡效果的图像标题。
演示版下载源浏览器支持该字幕将在很大程度上取决于转换和过渡属性，而变换和过渡属性是相对较新的功能，因此，明智地注意顺利运行该字幕所需的浏览器支持。
以下是已经支持转换和过渡的浏览器：
internet explorer 10+（尚未发布）firefox 6+铬13+safari 3.2+歌剧11+现在，让我们开始教程。
html结构我们有6张图片；每个图像都有不同的标题样式。
1个
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18岁
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<div id=mainwrapper><!-- this #mainwrapper section contains all of our images to make them center and look proper in the browser ->
<!-- image caption 1 -->
<div id=box-1 class=box>
?<img id=image-1 src=css3-image-captions/1.jpg/>
?<span class=caption simple-caption>
?<p>simple caption</p>
?</span>
</div>
<!-- image caption 2 -->
?<div id=box-2 class=box>
?<img id=image-2 src=css3-image-captions/2.jpg/>
?<span class=caption full-caption>
?<h4>full caption</h4>
?<p>lorem ipsum dolor sit amet, consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
?</span>
?</div>
<!-- image caption 3 -->
?<div id=box-3 class=box>
?<img id=image-3 src=css3-image-captions/3.jpg/>
?<span class=caption fade-caption>
?<h4>fade caption</h4>
?<p>lorem ipsum dolor sit amet, consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
?</span>
?</div>
<!-- image caption 4 -->
?<div id=box-4 class=box>
?<img id=image-4 src=css3-image-captions/4.jpg/>
?<span class=caption slide-caption>
?<h4>slide caption</h4>
?<p>lorem ipsum dolor sit amet, consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
?</span>
?</div>
<!-- image caption 5 -->
?<div id=box-5 class=box>
?<div class=rotate><!-- rotating div -->
<img id=image-5 src=css3-image-captions/5.jpg/>
<span class=caption rotate-caption>
<h4>this is rotate caption</h4>
<p>lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</span>
?</div>
?</div>
<!-- image caption 6 -->
?<div id=box-6 class=box>
?<img id=image-6 src=css3-image-captions/6.jpg/>
?<span class=caption scale-caption>
?<h4>free style caption</h4>
?<p>lorem ipsum dolor sit amet,consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
?</span>
?</div>
</div> <!-- end of #mainwrapper-->
基本css在对任何元素进行样式设置之前，使用此css重置重置所有属性并为其提供默认样式值始终是一个好的开始，因此所有浏览器都将呈现相同的结果（可能是ie6）。
样式将在style.css文件中分开，因此我们的html文件看起来很整洁。但是，不要忘记在head标签内添加链接样式以在文件中应用样式规则。
<link href=style.css rel=stylesheet type=text/css media=screen />
好的，让我们开始设计元素的样式，从html标签和主包装id开始：
1个
2
3
4
5
6
7
8
9
html { background-color: #eaeaea; }
#mainwrapper {
font: 10pt normal arial, sans-serif;
height: auto;
margin: 80px auto 0 auto;
text-align: center;
width: 660px