当前位置：编程学习 > JS >>

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

CSS3技术仿制一款仿iPhone工具栏特效，转成圆形的图标可不停的旋转，鼠标移上去图标放大，移开后恢复原样，动画效果十足，符合年轻人的操作习惯。
答案：<!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:

上一个：纯CSS3精仿Win7风格的开始菜单
下一个：播放列表文字显示/隐藏，点击展开

更多图片编程知识:
更多JS疑问解答：
几个验证11位手机号码格式的js代码
js把图片转换成 base64代码
js把base代码转换成图片
JS 将 base64编码的图片转化为图片文件
js中的定时器
js如何获得FCKeditor控件的值
用js限制投票的cookie .目前设置的为：<input type="" class="" onclick="'window.location...
JS验证，这块“牛皮”反复修改都不能实现
在JS中使用DOM模型
如何用JS 获取本地文件夹的文件列表
js中new 了两个Object数组。怎么样将数组内容合并，重复的内容？
求实现自动生成图片缩略图的JS代码
JS脚本网页问题
js，代码中"object"和"Object"区别？
js+flash实现网页图片切换效果，出现边框，单击激活此控件。
asp
php
Delphi
Matlab
JSP
Foxpro
JS
C/C++
C#/ASP.NET
VC++
JAVA
VB
汇编语言
html/css
CGI
XML/UML
wap
网站相关
网页素材
python
微信小程序
thinkphp
如果你遇到编程学习难题：
访问www.zzzyk.com 试试
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络，