CSS3的4种常用效果(360度旋转、旋转放大、放大、移动)

效果一:360°旋转 修改rotate(旋转度数)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.a{  
    transition:All 0.4s ease-in-out;  
    -webkit-transition:All 0.4s ease-in-out;  
    -moz-transition:All 0.4s ease-in-out;  
    -o-transition:All 0.4s ease-in-out;  
    width:200px;  
    height:200px;  
    background-color:#000000;  
    display:block;  
    margin:100px auto;  
    color:#fff;  
    text-align:center;  
    line-height:200px;  
    font-size:20px;  
    font-weight:bold;  
}  
.a:hover {  
    transform:rotate(360deg);  
    -webkit-transform:rotate(360deg);  
    -moz-transform:rotate(360deg);  
    -o-transform:rotate(360deg);  
    -ms-transform:rotate(360deg);  
}  

效果二:放大 修改scale(放大的值)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.a{  
    transition:All 0.4s ease-in-out;  
    -webkit-transition:All 0.4s ease-in-out;  
    -moz-transition:All 0.4s ease-in-out;  
    -o-transition:All 0.4s ease-in-out;  
    width:200px;  
    height:200px;  
    background-color:#000000;  
    display:block;  
    margin:100px auto;  
    color:#fff;  
        text-align:center;  
    line-height:200px;  
    font-size:20px;  
    font-weight:bold;  
}  
.a:hover {  
    transform:scale(1.2);  
    -webkit-transform:scale(1.2);  
    -moz-transform:scale(1.2);  
    -o-transform:scale(1.2);  
    -ms-transform:scale(1.2);  
}  

效果三:旋转放大 修改rotate(旋转度数) scale(放大值)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.a{  
    transition:All 0.4s ease-in-out;  
    -webkit-transition:All 0.4s ease-in-out;  
    -moz-transition:All 0.4s ease-in-out;  
    -o-transition:All 0.4s ease-in-out;  
    width:200px;  
    height:200px;  
    background-color:#000000;  
    display:block;  
    margin:100px auto;  
    color:#fff;  
        text-align:center;  
    line-height:200px;  
    font-size:20px;  
    font-weight:bold 
}  
.a:hover {  
    transform:rotate(360deg) scale(1.2);  
    -webkit-transform:rotate(360deg) scale(1.2);  
    -moz-transform:rotate(360deg) scale(1.2);  
    -o-transform:rotate(360deg) scale(1.2);  
    -ms-transform:rotate(360deg) scale(1.2);  
}  

效果四:上下左右移动 修改translate(x轴,y轴)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.a{  
    transition:All 0.4s ease-in-out;  
    -webkit-transition:All 0.4s ease-in-out;  
    -moz-transition:All 0.4s ease-in-out;  
    -o-transition:All 0.4s ease-in-out;  
    width:200px;  
    height:200px;  
    background-color:#000000;  
    display:block;  
    margin:100px auto;  
    color:#fff;  
    text-align:center;  
    line-height:200px;  
    font-size:20px;  
    font-weight:bold;  
}  
.a:hover {  
    transform:translate(0,-10px);  
    -webkit-transform:translate(0,-10px);  
    -moz-transform:translate(0,-10px);  
    -o-transform:translate(0,-10px);  
    -ms-transform:translate(0,-10px);  
}


您可以还会对下面的文章感兴趣:

暂无相关文章

最新评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。