[css3]圓盤旋轉動畫

效果：打開只能看到logo，鼠標放上去，圓盤漸顯放大旋轉展現出來

知識點：

[html+css]

1.logo水平垂直居中於圓盤內，用到的樣式

 position: absolute; left: 0; top: 0; bottom: 0; right: 0; margin:auto;

2.放大旋轉用transform的scale和rotate，漸顯用opacity，動畫過分天然用transition

3.背景用rgba的好處：opacity會做用於整個元素和他的子元素，rgba的透明度不會影響他的子元素

[js]

1.每一個小圖標的位置用數學方法裏的sin和cos來計算，注:每一個小圖標的margin-top和margin-left應爲自身寬高一半的負值，才能正肯定位

 

<nav>
　　<a href="" class="logo"></a>
　　<div class="ring">
　　　　<a href="" class="icon"></a>
	<a href="" class="icon"></a>
	<a href="" class="icon"></a>
	<a href="" class="icon"></a>
	<a href="" class="icon"></a>
	<a href="" class="icon"></a>
	<a href="" class="icon"></a>
	<a href="" class="icon"></a>
　　</div>			
</nav>

 

<style type="text/css">
nav{ position: relative; width: 256px; height: 256px; border-radius: 50%; margin: 100px auto;}
.ring{ position: relative; width: 256px; height: 256px; border-radius: 50%; margin: 0 auto; background: rgba(0,0,0,.4); transform: scale(0.1) 
rotate(-270deg); opacity: 0; transition: all 500ms;}
.ring:hover{ transform: scale(1.1) rotate(0); opacity: 1;}
.logo{ position: absolute; display: block; width: 80px; height: 80px; margin: auto; border: 2px solid #fff; border-radius: 50%; left: 0; top: 0; 
bottom: 0; right: 0; background: rgba(0,0,0,.5) url(img/logo.png) no-repeat center;}
.ring a{ position: absolute; display: block; width: 40px; height: 40px; margin-left: -20px; margin-top: -20px; border-radius: 50%;}
.ring a:nth-child(1){ background: url(img/1_28.png) no-repeat top #fff;}        //:nth-child()是css3選擇器，background-color不能直接寫到a裏，會被:nth-child()覆蓋
.ring a:nth-child(2){ background: url(img/1_29.png) no-repeat top #fff;}
.ring a:nth-child(3){ background: url(img/1_30.png) no-repeat top #fff;}
.ring a:nth-child(4){ background: url(img/1_31.png) no-repeat top #fff;}
.ring a:nth-child(5){ background: url(img/1_32.png) no-repeat top #fff;}
.ring a:nth-child(6){ background: url(img/1_33.png) no-repeat top #fff;}
.ring a:nth-child(7){ background: url(img/1_34.png) no-repeat top #fff;}
.ring a:nth-child(8){ background: url(img/1_35.png) no-repeat top #fff;}
</style>

 

<script type="text/javascript">
var $icon=$(".icon");
for(var i=0,l=$icon.length;i<l;i++){
　　var _left=(50-35*Math.cos(-0.5*Math.PI-2*(1/l)*i*Math.PI)).toFixed(4)+"%";
　　var _top=(50+35*Math.sin(-0.5*Math.PI-2*(1/l)*i*Math.PI)).toFixed(4)+"%";
　　$icon.eq(i).css({"left":_left,"top":_top});
}
</script>