扇形导航 css3

本篇文章将通过对css3中的2d变化以及过渡进行分析设计

先放上最终效果图

               

 

 

 

功能实现：1.给扇形home元素设置点击事件并添加2d旋转

　　　　　2.给导航栏设置2d旋转 并通过三角函数计算出各个导航位置

　　　　　3.设置导航单击事件 并添加过渡结束事件transitonend  完成点击放大并恢复的动画

注　　意：transitonend事件需要及时移除 假如没有内部自杀 

　　　　　则这个事件一直伴随着点击时间存在 则会导致其进行其他过渡时仍会触发

 

              　　　　导致下图变化

　　　　　　　　　　　　　　　　　　　　　　　　　　在过渡结束后存在多余操作

 

　　　　　　　　正确示意应是

　　　　　　　　　　　　　　　　　　　　　　　　　　　　内容清晰  无多余操作

 

css部分代码

	*{
				padding: 0;
				margin: 0;
			}
			
			body,html{
				height: 100%;
				overflow: hidden;
			}
			
			#wrap{
				position: absolute;
				bottom: 8px;
				right: 8px;
				width:50px ;
				height: 50px;
				/* background: pink; */
				
			}
			
			
			#wrap > #content>img{
				position: absolute;
				left: 0;
				top: 0;
				margin: 4px;
				border-radius:50% ;
				
			}
			#wrap > #content{
				height: 100%;
			}
			
			#wrap > #home{
				/* margin-top: 100px; */
				position: absolute;
				z-index: 1;
				/* height: 50px */
				background: url(img/home.png) no-repeat;
				width: 100%;
				height: 100%;
				border-radius:50% ;
				top: 0;
				left: 0;
				
				transition: 1s;
				
				
				
			}
		/* 	#wrap > #home:hover{
				transform: rotate(720deg);
			}
			 */

　　html代码如下

　　JavaScript代码如下