CSS3旋转图标标签

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 CSS3旋转图标标签的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3旋转图标标签</title>
<link rel="stylesheet" type="text/css" href="css/lanrenzhijia.css" media="screen" />
</head>
<body>
<center>
  <ul class="lanrenzhijia" style="width:1350px;">
    <li> <a href="#" class="lanren1"><span><br />
      NEW<br />
      CSS3<br />
      lanrenzhijia!</span></a> </li>
    <li> <a href="#" class="lanren2"><span><span><span><br />
      NEW<br />
      CSS3<br />
      lanrenzhijia!</span></span></span></a> </li>
    <li> <a href="#" class="lanren3"><span><span><span><span><span><span><span><span><br />
      NEW<br />
      CSS3<br />
      lanrenzhijia!</span></span></span></span></span></span></span></span></a> </li>
    <li> <a href="#" class="lanren4"><span><span><span><span><br />
      NEW<br />
      CSS3<br />
      lanrenzhijia!</span></span></span></span></a> </li>
    <li> <a href="#" class="lanren5"><span><span><span><span><span><span><span><br />
      NEW<br />
      CSS3<br />
      lanrenzhijia!</span></span></span></span></span></span></span></a> </li>
    <li> <a href="#" class="lanren6"><span><span><span><span>NEW CSS3<br />
      lanrenzhijia!</span></span></span></span></a> </li>
    <li> <a href="#" class="lanren7"><span><span><span><span><span><span><span><span><span><span><span><span><span><span><span><span>NEW CSS3<br />
      lanrenzhijia!</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></a> </li>
  </ul>
</center>
</body>
</html>

CSS代码(lanrenzhijia.css):

ul.lanrenzhijia{list-style:none;margin:20px 0;padding:0;overflow:hidden;}
ul.lanrenzhijia li{float:left;width:10em;height:10em;position:relative;}
ul.lanrenzhijia *{margin:0;padding:0;line-height:1.2em;}
/* lanren 1 */
.lanren1{display:block;width:6em;height:6em;background:#ff47ab;-webkit-transform:rotate(-22.5deg);-moz-transform:rotate(-22.5deg);rotation:-22.5deg;position:absolute;top:2em;left:2em;text-align:center;text-decoration:none;color:#fff;font-weight:bold;font-family:Arial,sans-serif;text-shadow:0 0 3em #f00,0 0 4px #88004a;-moz-transition:-moz-transform 0.3s ease;-webkit-transition:-webkit-transform 0.3s ease;-o-transition:-o-transform 0.3s ease;transition:transform 0.3s ease;}
.lanren1 span{display:block;width:6em;height:6em;background:#ff47ab;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);rotation:45deg;}
.lanren1:hover,.lanren1:hover span{background:#f00;color:#fff;text-shadow:0 0 20px #fff,0 0 8px #fff;}
.lanren1:hover{-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);rotation:-405deg;}
/* lanren 2 */
.lanren2{display:block;width:6em;height:6em;background:#fe0;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);rotation:-45deg;position:relative;top:2em;left:2em;text-align:center;text-decoration:none;color:#000;font-weight:bold;font-family:Arial,sans-serif;text-shadow:0 0 3em #f00,0 0 4px #f30;-moz-transition:-moz-transform 0.3s ease;-webkit-transition:-webkit-transform 0.3s ease;transition:transform 0.3s ease;}
.lanren2 span{display:block;width:6em;height:6em;background:#fe0;-webkit-transform:rotate(22.5deg);-moz-transform:rotate(22.5deg);rotation:22.5deg;}
.lanren2:hover,.lanren2:hover span{background:#fa0;color:#fff;text-shadow:0 0 20px #fff,0 0 8px #fff;}
.lanren2:hover{-webkit-transform:rotate(315deg);-moz-transform:rotate(315deg);rotation:315deg;}
/* lanren 3 */
.lanren3{display:block;width:6em;height:6em;-webkit-transform:rotate(-67.5deg);-moz-transform:rotate(-67.5deg);rotation:-67.5deg;position:relative;top:2em;left:2em;text-align:center;text-decoration:none;color:#000;font-weight:bold;font-family:Arial,sans-serif;text-shadow:0 0 3em #04b3df,0 0 4px #0077e5;font-size:1em;-moz-transition:all 0.3s ease-out;-webkit-transition:all 0.3s ease-out;transition:all 0.3s ease-out;}
.lanren3 span{display:block;width:6em;height:6em;background:#00f4b2;-webkit-transform:rotate(11.25deg);-moz-transform:rotate(11.25deg);rotation:12.5deg;}
.lanren3:hover span{background:#00e530;}
.lanren3:hover{left:2.5em;top:1.5em;}
/* lanren 4 */
.lanren4{display:block;width:6em;height:6em;-webkit-transform:rotate(-67.5deg);-moz-transform:rotate(-67.5deg);rotation:-67.5deg;position:relative;top:2em;left:2em;text-align:center;text-decoration:none;color:#000;font-weight:bold;font-family:Arial,sans-serif;text-shadow:-1px -1px -1px #fff,1px 1px 1px #00f;}
.lanren4 span{display:block;width:6em;height:6em;background:#78d7ff;-webkit-transform:rotate(22.5deg);-moz-transform:rotate(22.5deg);rotation:22.5deg;-moz-border-radius:2.5em;-webkit-border-radius:2.5em;border-radius:2.5em;-moz-transition:-moz-border-radius 0.2s ease-in;-webkit-transition:-webkit-border-radius 0.2s ease-in;transition:border-radius 0.2s ease-in;}
.lanren4:hover{background:transparent;}
.lanren4:hover span{background:#08f;color:#fff;text-shadow:0 0 20px #fff,0 0 8px #fff;-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;}
/* lanren 5 */
.lanren5{display:block;width:6em;height:6em;background:#7e00df;position:relative;top:2em;left:2em;text-align:center;text-decoration:none;color:#fff;font-weight:bold;font-family:Arial,sans-serif;text-shadow:0 0 3em #04b3df,0 0 4px #ff0;font-size:1em;-webkit-transform:rotate(-56.5deg);-moz-transform:rotate(-56.5deg);rotation:-56.5deg;}
.lanren5 span{display:block;width:6em;height:6em;background:#7e00df;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);rotation:-45deg;-moz-transition:-moz-transform 1s ease;-webkit-transition:-webkit-transform 1s ease;transition:transform 1s ease;}
.lanren5:hover{background:#7e00df;}
.lanren5:hover span{-webkit-transform:rotate(11.25deg);-moz-transform:rotate(11.25deg);rotation:11.25deg;}
/* lanren 6 */
.lanren6{display:block;width:8em;height:2.5em;-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);rotation:180deg;position:relative;top:3.75em;left:2em;text-align:center;text-decoration:none;color:#fff;font-weight:bold;font-family:Arial,sans-serif;}
.lanren6 span{display:block;margin:0 auto;width:6em;height:2.5em;background:#f00;text-shadow:0 0 3em #04b3df,0 0 4px #0077e5;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);rotation:45deg;-moz-transition:all 0.6s ease-out;-webkit-transition:all 0.6s ease-out;transition:all 0.6s ease-out;}
.lanren6:hover span{background:#f90;width:8em;-moz-border-radius:2.5em;-webkit-border-radius:2.5em;border-radius:2.5em;text-shadow:0 0 3em #f00,0 0 4px #f88;}
.lanren6:hover{left:2em;width:8em;background:transparent;}
/* lanren 7 */
.lanren7{display:block;width:8em;height:3em;position:relative;top:3.75em;left:1em;text-align:center;text-decoration:none;color:#fff;font-weight:bold;font-family:Arial,sans-serif;}
.lanren7 span{display:block;width:8em;height:2.5em;background:#00cd00;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);rotation:-45deg;-moz-transition:all 0.8s ease-out;-webkit-transition:all 0.8s ease-out;transition:all 0.8s ease-out;-moz-border-radius:2em;-webkit-border-radius:2em;border-radius:2em;text-shadow:1px 1px 1px #000;}
.lanren7:hover{background:transparent;}
.lanren7:hover span{-webkit-transform:rotate(52.5deg);-moz-transform:rotate(52.5deg);rotation:52.5deg;-webkit-transform:translate(1em,0);-moz-transform:translate(1em,0);translate(1em,0);}

附件:下载该文件资源,减少时间成本(增值服务)