冰冻西瓜小辉的博客分享网站

css3图片旋转 改个百度分享

2014年07月22日  +

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="keywords" content="css sprite" >
<meta name="description" content="web前端开发">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=7, IE=9">
<title>css3图片旋转 改个百度分享</title>
<style type="text/css">
body,ul,li,a,h1,h2,h3{margin:0;padding:0}
ul,li{list-style-type:none}
body{margin:0 auto;font:12px/1.5 tahoma,arial,\5b8b\4f53;color:#828282;background:#fff}
h3{width:100%;float:left;margin-top:50px;}
ul{margin:20px auto}
li{width:32px;height:32px;float:left;margin-left:5px;display:inline;}
li a{width:32px;height:32px;float:left;display:block;background: url(http://www.wuhanjc.com/jiathis_ico_32x32.png) no-repeat;} 
.l1{background-position:0 0;}
.l1 a{background-position:0 0;width: 32px; height: 32px; position: relative; z-index: 10;-webkit-transition: -webkit-transform 0.4s ease-out;-moz-transition: -moz-transform 0.4s ease-out; transition: transform 0.4s ease-out;}
.l1 a:hover{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);transform: rotate(360deg);}
.l2{background-position:0 -32px}
.l2 a{background-position:0 -32px;width: 32px; height: 32px; position: relative; z-index: 10;-webkit-transition: -webkit-transform 0.4s ease-out;-moz-transition: -moz-transform 0.4s ease-out; transition: transform 0.4s ease-out;}
.l2 a:hover{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);transform: rotate(360deg);}
.l3{background-position:0 -64px}
.l3 a{background-position:0 -64px;width: 32px; height: 32px; position: relative; z-index: 10;-webkit-transition: -webkit-transform 0.4s ease-out;-moz-transition: -moz-transform 0.4s ease-out; transition: transform 0.4s ease-out;}
.l3 a:hover{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);transform: rotate(360deg);}
.l4{background-position:0 -96px}
.l4 a{background-position:0 -96px;width: 32px; height: 32px; position: relative; z-index: 10;-webkit-transition: -webkit-transform 0.4s ease-out;-moz-transition: -moz-transform 0.4s ease-out; transition: transform 0.4s ease-out;}
.l4 a:hover{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);transform: rotate(360deg);}
.l5{background-position:0 -128px}
.l5 a{background-position:0 -128px;width: 32px; height: 32px; position: relative; z-index: 10;-webkit-transition: -webkit-transform 0.4s ease-out;-moz-transition: -moz-transform 0.4s ease-out; transition: transform 0.4s ease-out;}
.l5 a:hover{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);transform: rotate(360deg);}
.l6{background-position:0 -160px}
.l6 a{background-position:0 -160px;width: 32px; height: 32px; position: relative; z-index: 10;-webkit-transition: -webkit-transform 0.4s ease-out;-moz-transition: -moz-transform 0.4s ease-out; transition: transform 0.4s ease-out;}
.l6 a:hover{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);transform: rotate(360deg);}
.l7{background-position:0 -192px}
.l7 a{background-position:0 -192px;width: 32px; height: 32px; position: relative; z-index: 10;-webkit-transition: -webkit-transform 0.4s ease-out;-moz-transition: -moz-transform 0.4s ease-out; transition: transform 0.4s ease-out;}
.l7 a:hover{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);transform: rotate(360deg);}
.l8{background-position:0 -224px}
.l8 a{background-position:0 -224px;width: 32px; height: 32px; position: relative; z-index: 10;-webkit-transition: -webkit-transform 0.4s ease-out;-moz-transition: -moz-transform 0.4s ease-out; transition: transform 0.4s ease-out;}
.l8 a:hover{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);transform: rotate(360deg);}
.l9{background-position:0 -256px}
.l9 a{background-position:0 -256px;width: 32px; height: 32px; position: relative; z-index: 10;-webkit-transition: -webkit-transform 0.4s ease-out;-moz-transition: -moz-transform 0.4s ease-out; transition: transform 0.4s ease-out;}
.l9 a:hover{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);transform: rotate(360deg);}
.l10{background-position:0 -288px}
.l10 a{background-position:0 -288px;width: 32px; height: 32px; position: relative; z-index: 10;-webkit-transition: -webkit-transform 0.4s ease-out;-moz-transition: -moz-transform 0.4s ease-out; transition: transform 0.4s ease-out;}
.l10 a:hover{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);transform: rotate(360deg);}
</style>
</head>
<body>
<h2><a href="###" target="_blank">css3图片旋转 改个百度分享</a></h2>
<ul>
<li class="l1"><a href=""></a></li>
<li class="l2"><a href=""></a></li>
<li class="l3"><a href=""></a></li>
<li class="l4"><a href=""></a></li>
<li class="l5"><a href=""></a></li>
<li class="l6"><a href=""></a></li>
<li class="l7"><a href=""></a></li>
<li class="l8"><a href=""></a></li>
<li class="l9"><a href=""></a></li>
<li class="l10"><a href=""></a></li>
</ul>
</body>
</html>
展开剩余60%

冰冻西瓜小辉在线提示!

亲亲还木有想好表达什么么么么么么...

冰冻西瓜小辉在线提示!