总结网页中流行的8种css3样式

浏览数：50 / 时间：2015年06月09日

CSS样式：

.f1 img{border-radius:50%;transition: all .4s ease-out;}
.f1 a:hover img{border-radius:0px;}

.f2 a{transition:all 0.4s ease-out 0s;color:#000;} 
.f2 a:hover{margin-left:10px; text-decoration:none;}

.f21{
    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-top:100px;
    color:#fff;
    text-align:center;
    line-height:200px;
    font-size:20px;
    font-weight:bold;
}
.f21:hover {
    transform:translate(10px,0);
    -webkit-transform:translate(10px,0);
    -moz-transform:translate(10px,0);
    -o-transform:translate(10px,0);
    -ms-transform:translate(10px,0);
}

.f22{
    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-top:100px;
    color:#fff;
    text-align:center;
    line-height:200px;
    font-size:20px;
    font-weight:bold;
}
.f22: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);
}

.f3 a{ background: url(toux1.jpg) no-repeat; width:200px; height:200px; display:block;}
.f3 a:hover{ background-position: 0 -200px; transition: all .4s ease-out;}

.f4{
    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-top:30px;
    color:#fff;
    text-align:center;
    line-height:200px;
    font-size:20px;
    font-weight:bold;
}
.f4:hover {
    transform:rotate(360deg);
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -o-transform:rotate(360deg);
    -ms-transform:rotate(360deg);
}

.f5{
    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-top:30px;
    color:#fff;
    text-align:center;
    line-height:200px;
    font-size:20px;
    font-weight:bold;
}
.f5: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);
}
#f6{ width:200px; height:200px; overflow:hidden; border:2px #61C799 solid;}
.f6{
    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;
    display:block;
    color:#fff;
    text-align:center;
    line-height:200px;
    font-size:20px;
    font-weight:bold;
}
.f6: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);
}

HTML：

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>现在网页中流行的css3样式</title>
 6 </head>
 7 
 8 <body>
 9 <div class="f1">
10 <a href="#"><img src="toux.jpg" width="200" height="200" alt=""/></a>
11 </div>
12 <hr>
13 <div class="f2">
14 <a href="#"><img src="toux.jpg" width="200" height="200" alt=""/></a>
15 </div>
16 <hr>
17 <a class="f21">左右移动</a>
18 <hr>
19 <a class="f22">上下移动</a>
20 <hr>
21 <div class="f3">
22 <a href="#">测试测试</a>
23 </div>
24 <hr>
25 <a class="f4">360度旋转</a>
26 <hr>
27 <a class="f5">放大效果</a>
28 <hr>
29 <div id="f6">
30 <a class="f6"><img src="toux.jpg" width="200" height="200" alt=""/></a>
31 </div>
32 
33 </body>
34 </html>