当前位置：首页 > 网页特效 > 导航菜单 >

css3仿制圆形旋转的苹果工具栏图标

时间：2013-04-01 22:19 来源：互联网作者：源码搜藏收藏推荐

<!DOCTYPE HTML>
<html lang=zh-cn>
<head>
<meta charset=utf-8>
<title>css3苹果工具栏</title>
<style>
*{margin:0px;padding:0px;}
body{background:#b1b1b1;margin:0px;padding:0px;font-size:14px;color:#000;}
.tips{width:702px;margin:0 auto;line-height:24px;padding-top:10px;}
.bredcolor{color:#fff;}
.circles {width:320px;height:320px;border-radius:320px;margin:50px auto;position:relative;border-radius:320px;}
.circles a.tgt {display:block;position:absolute;left:128px;top:0;width:64px;height:64px;border-radius:64px;z-index:100;background:url("/jscss/demoimg/201209/trans.gif");
	-webkit-transform-origin:32px 160px;
	-moz-transform-origin:32px 160px;
	-ms-transform-origin:32px 160px;
	-o-transform-origin:32px 160px;
	transform-origin:32px 160px;
}

.circle li:nth-child(2),
.circles a:nth-child(2) {
	-webkit-transform: rotate(40deg);
	-moz-transform: rotate(40deg);
	-ms-transform: rotate(40deg);
	-o-transform: rotate(40deg);
	transform: rotate(40deg);
}
.circle li:nth-child(3),
.circles a:nth-child(3) {
	-webkit-transform: rotate(80deg);
	-moz-transform: rotate(80deg);
	-ms-transform: rotate(80deg);
	-o-transform: rotate(80deg);
	transform: rotate(80deg);
}
.circle li:nth-child(4),
.circles a:nth-child(4) {
	-webkit-transform: rotate(120deg);
	-moz-transform: rotate(120deg);
	-ms-transform: rotate(120deg);
	-o-transform: rotate(120deg);
	transform: rotate(120deg);
}
.circle li:nth-child(5),
.circles a:nth-child(5) {
	-webkit-transform: rotate(160deg);
	-moz-transform: rotate(160deg);
	-ms-transform: rotate(160deg);
	-o-transform: rotate(160deg);
	transform: rotate(160deg);
}
.circle li:nth-child(6),
.circles a:nth-child(6) {
	-webkit-transform: rotate(200deg);
	-moz-transform: rotate(200deg);
	-ms-transform: rotate(200deg);
	-o-transform: rotate(200deg);
	transform: rotate(200deg);
}
.circle li:nth-child(7),
.circles a:nth-child(7) {
	-webkit-transform: rotate(240deg);
	-moz-transform: rotate(240deg);
	-ms-transform: rotate(240deg);
	-o-transform: rotate(240deg);
	transform: rotate(240deg);
}
.circle li:nth-child(8),
.circles a:nth-child(8) {
	-webkit-transform: rotate(280deg);
	-moz-transform: rotate(280deg);
	-ms-transform: rotate(280deg);
	-o-transform: rotate(280deg);
	transform: rotate(280deg);
}
.circle li:nth-child(9),
.circles a:nth-child(9) {
	-webkit-transform: rotate(320deg);
	-moz-transform: rotate(320deg);
	-ms-transform: rotate(320deg);
	-o-transform: rotate(320deg);
	transform: rotate(320deg);
}

ul.circle {padding:0;margin:0;list-style:none;width:320px;height:320px;position:absolute;left:0;top:0;z-index:10;}
ul.circle li {position:absolute;left:128px;top:0;width:64px;height:64px;border-radius:64px;
	-webkit-transform-origin:32px 160px;
	-moz-transform-origin:32px 160px;
	-ms-transform-origin:32px 160px;
	-o-transform-origin:32px 160px;
	transform-origin:32px 160px;
}
ul.circle li b {display:block;width:64px;height:64px;border-radius:64px;text-align:center;margin:0;position:relative;
	-webkit-transition: 0.5s;
	-moz-transition: 0.5s;
	-ms-transition: 0.5s;
	-o-transition: 0.5s;
	transition: 0.5s;
}
ul.circle li b img {width:62.5%;height:62.5%;padding-top:18.75%;
	-webkit-transition: 0.5s;
	-moz-transition: 2s;
	-ms-transition: 0.5s;
	-o-transition: 0.5s;
	transition: 0.5s;
}

.circle li:nth-child(2) b {
	-webkit-transform: rotate(-40deg);
	-moz-transform: rotate(-40deg);
	-ms-transform: rotate(-40deg);
	-o-transform: rotate(-40deg);
	transform: rotate(-40deg);
}
.circle li:nth-child(3) b {
	-webkit-transform: rotate(-80deg);
	-moz-transform: rotate(-80deg);
	-ms-transform: rotate(-80deg);
	-o-transform: rotate(-80deg);
	transform: rotate(-80deg);
}
.circle li:nth-child(4) b {
	-webkit-transform: rotate(-120deg);
	-moz-transform: rotate(-120deg);
	-ms-transform: rotate(-120deg);
	-o-transform: rotate(-120deg);
	transform: rotate(-120deg);
}
.circle li:nth-child(5) b {
	-webkit-transform: rotate(-160deg);
	-moz-transform: rotate(-160deg);
	-ms-transform: rotate(-160deg);
	-o-transform: rotate(-160deg);
	transform: rotate(-160deg);
}
.circle li:nth-child(6) b {
	-webkit-transform: rotate(-200deg);
	-moz-transform: rotate(-200deg);
	-ms-transform: rotate(-200deg);
	-o-transform: rotate(-200deg);
	transform: rotate(-200deg);
}
.circle li:nth-child(7) b {
	-webkit-transform: rotate(-240deg);
	-moz-transform: rotate(-240deg);
	-ms-transform: rotate(-240deg);
	-o-transform: rotate(-240deg);
	transform: rotate(-240deg);
}
.circle li:nth-child(8) b {
	-webkit-transform: rotate(-280deg);
	-moz-transform: rotate(-280deg);
	-ms-transform: rotate(-280deg);
	-o-transform: rotate(-280deg);
	transform: rotate(-280deg);
}
.circle li:nth-child(9) b {
	-webkit-transform: rotate(-320deg);
	-moz-transform: rotate(-320deg);
	-ms-transform: rotate(-320deg);
	-o-transform: rotate(-320deg);
	transform: rotate(-320deg);
}

.circles a.tgt:hover {display:block;position:absolute;left:96px;top:-32px;width:128px;height:128px;border-radius:128px;z-index:100;z-index:50;
	-webkit-transform-origin:64px 192px;
	-moz-transform-origin:64px 192px;
	-ms-transform-origin:64px 192px;
	-o-transform-origin:64px 192px;
	transform-origin:64px 192px;
}

.circles a.p1:hover ~ .circle li:nth-child(1) b,
.circles a.p2:hover ~ .circle li:nth-child(2) b,
.circles a.p3:hover ~ .circle li:nth-child(3) b,
.circles a.p4:hover ~ .circle li:nth-child(4) b,
.circles a.p5:hover ~ .circle li:nth-child(5) b,
.circles a.p6:hover ~ .circle li:nth-child(6) b,
.circles a.p7:hover ~ .circle li:nth-child(7) b,
.circles a.p8:hover ~ .circle li:nth-child(8) b,
.circles a.p9:hover ~ .circle li:nth-child(9) b
{width:128px;height:128px;border-radius:128px;margin-left:-32px;margin-top:-32px;}

.circles a.p1:hover ~ .circle li:nth-child(2) b,
.circles a.p2:hover ~ .circle li:nth-child(3) b,
.circles a.p3:hover ~ .circle li:nth-child(4) b,
.circles a.p4:hover ~ .circle li:nth-child(5) b,
.circles a.p5:hover ~ .circle li:nth-child(6) b,
.circles a.p6:hover ~ .circle li:nth-child(7) b,
.circles a.p7:hover ~ .circle li:nth-child(8) b,
.circles a.p8:hover ~ .circle li:nth-child(9) b,
.circles a.p9:hover ~ .circle li:nth-child(1) b
{width:112px;height:112px;border-radius:112px;margin-left:-24px;margin-top:-24px;}

.circles a.p1:hover ~ .circle li:nth-child(3) b,
.circles a.p2:hover ~ .circle li:nth-child(4) b,
.circles a.p3:hover ~ .circle li:nth-child(5) b,
.circles a.p4:hover ~ .circle li:nth-child(6) b,
.circles a.p5:hover ~ .circle li:nth-child(7) b,
.circles a.p6:hover ~ .circle li:nth-child(8) b,
.circles a.p7:hover ~ .circle li:nth-child(9) b,
.circles a.p8:hover ~ .circle li:nth-child(1) b,
.circles a.p9:hover ~ .circle li:nth-child(2) b
{width:96px;height:96px;border-radius:96px;margin-left:-16px;margin-top:-16px;}

.circles a.p1:hover ~ .circle li:nth-child(4) b,
.circles a.p2:hover ~ .circle li:nth-child(5) b,
.circles a.p3:hover ~ .circle li:nth-child(6) b,
.circles a.p4:hover ~ .circle li:nth-child(7) b,
.circles a.p5:hover ~ .circle li:nth-child(8) b,
.circles a.p6:hover ~ .circle li:nth-child(9) b,
.circles a.p7:hover ~ .circle li:nth-child(1) b,
.circles a.p8:hover ~ .circle li:nth-child(2) b,
.circles a.p9:hover ~ .circle li:nth-child(3) b
{width:80px;height:80px;border-radius:80px;margin-left:-8px;margin-top:-8px;}

.circles a.p1:hover ~ .circle li:nth-child(9) b,
.circles a.p2:hover ~ .circle li:nth-child(1) b,
.circles a.p3:hover ~ .circle li:nth-child(2) b,
.circles a.p4:hover ~ .circle li:nth-child(3) b,
.circles a.p5:hover ~ .circle li:nth-child(4) b,
.circles a.p6:hover ~ .circle li:nth-child(5) b,
.circles a.p7:hover ~ .circle li:nth-child(6) b,
.circles a.p8:hover ~ .circle li:nth-child(7) b,
.circles a.p9:hover ~ .circle li:nth-child(8) b
{width:112px;height:112px;border-radius:112px;margin-left:-24px;margin-top:-24px;}

.circles a.p1:hover ~ .circle li:nth-child(8) b,
.circles a.p2:hover ~ .circle li:nth-child(9) b,
.circles a.p3:hover ~ .circle li:nth-child(1) b,
.circles a.p4:hover ~ .circle li:nth-child(2) b,
.circles a.p5:hover ~ .circle li:nth-child(3) b,
.circles a.p6:hover ~ .circle li:nth-child(4) b,
.circles a.p7:hover ~ .circle li:nth-child(5) b,
.circles a.p8:hover ~ .circle li:nth-child(6) b,
.circles a.p9:hover ~ .circle li:nth-child(7) b
{width:96px;height:96px;border-radius:96px;margin-left:-16px;margin-top:-16px;}

.circles a.p1:hover ~ .circle li:nth-child(7) b,
.circles a.p2:hover ~ .circle li:nth-child(8) b,
.circles a.p3:hover ~ .circle li:nth-child(9) b,
.circles a.p4:hover ~ .circle li:nth-child(1) b,
.circles a.p5:hover ~ .circle li:nth-child(2) b,
.circles a.p6:hover ~ .circle li:nth-child(3) b,
.circles a.p7:hover ~ .circle li:nth-child(4) b,
.circles a.p8:hover ~ .circle li:nth-child(5) b,
.circles a.p9:hover ~ .circle li:nth-child(6) b
{width:80px;height:80px;border-radius:80px;margin-left:-8px;margin-top:-8px;}
</style>
</head>
<body>

运行代码保存代码复制代码提示：您可以先修改部分代码再运行，保存代码功能在Firefox下无效。

CSS3技术仿制一款仿iPhone工具栏特效，转成圆形的图标可不停的旋转，鼠标移上去图标放大，移开后恢复原样，动画效果十足，符合年轻人的操作习惯。由源码搜藏网整理,转载请注明出处https://www.codesocang.com/tx-daohang/1035.html

网页特效

css3仿制圆形旋转的苹果工具栏图标

导航菜单下载排行

最新文章