[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>

 

转载于:https://www.cnblogs.com/zhangwenkan/p/4723625.html