标签：style blog http color io os ar for sp
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>
所需图片：
toux.jpg
toux1.jpg
标签：style blog http color io os ar for sp
原文地址：http://www.cnblogs.com/xiaoky/p/4010632.html
