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

avatar 2015年8月22日00:07:45 1

效果一: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);  
}  
  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 我的微信公众号扫一扫
  • weinxin
avatar

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:1   其中:访客  1   博主  0

    • avatar YO 0

      棒棒 :mrgreen: