案例:CSS3案例     状态:可编辑再运行    进入竖版
 运行结果 
x
 
1
<!DOCTYPE html>
2
<html>
3
<head>
4
<style> 
5
.animated_div
6
    {
7
    width:65px;
8
    height:40px;
9
    background:#92B901;
10
    color:#ffffff;
11
    position:absolute;
12
    font-weight:bold;
13
    font:12px '微软雅黑', Verdana, Arial, Helvetica, sans-serif;
14
    padding:20px 10px 0px 10px;
15
    float:left;
16
    margin:5px;
17
    -webkit-transition:-webkit-transform 1s,opacity 1s,background 1s,width 1s,height 1s,font-size 1s;
18
    -webkit-border-radius:5px;
19
    -o-transition-property:width,height,-o-transform,background,font-size,opacity;
20
    -o-transition-duration:1s,1s,1s,1s,1s,1s;
21
    -moz-transition-property:width,height,-o-transform,background,font-size,opacity;
22
    -moz-transition-duration:1s,1s,1s,1s,1s,1s;
23
    transition-property:width,height,transform,background,font-size,opacity;
24
    transition-duration:1s,1s,1s,1s,1s,1s;
25
    border-radius:5px;
26
    opacity:0.4;
27
    }
28
29
.animated_div:hover
30
    {
31
    -moz-transform: rotate(360deg);
32
    -webkit-transform: rotate(360deg);
33
    -o-transform: rotate(360deg);
34
    transform: rotate(360deg);
35
    opacity:1;
36
    background:#1ec7e6;
37
    width:90px;
38
    height:60px;
39
    font-size:16px;
40
    }
41
</style>
42
43
</head>
44
<body>
45
46
<p class="animated_div">CSS3 过渡</p>
47
48
</body>