本篇文章将通过对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代码如下
<div id="wrap"> <div id="content"> <img src="img/clos.png" > <img src="img/full.png" > <img src="img/open.png" > <img src="img/prev.png" > <img src="img/refresh.png" > </div> <div id="home"></div> </div>
JavaScript代码如下
<script type="text/javascript"> window.onload=function(){ var c=130; var home=document.getElementById("home"); var imgs=document.querySelectorAll("#wrap > #content > img"); var flag=true; home.onclick = function(){ function fun(){ this.style.transition=".1s"; this.style.transform="rotate(-720deg) scale(1) "; this.style.opacity="1"; this.removeEventListener("transitionend",fun); } //给所有的img绑定点击属性 需要遍历 for(i=0;i<imgs.length;i++){ imgs[i].addEventListener("click",function(){ this.style.transform="rotate(-720deg) scale(1.5) "; this.style.transition=".4s"; this.style.opacity="0.1"; this.addEventListener("transitionend",fun); }); //在运行结束后希望能触发一个新的事件 并移除它 //imgs[i].addEventListener("transitionend",fun); } if(flag){ this.style.transform= "rotate(-720deg)"; for(i=0;i<imgs.length;i++){ //因为是逐个出现 所以要算不同的过渡延迟 还要有空格进行区分两个属性 imgs[i].style.transition=".5s "+(i*0.1)+"s "; //因为有旋转 imgs[i].style.transform=" rotate(-720deg) scale(1)"; imgs[i].style.left = -getpoint(c,90*i/(imgs.length-1)).left+"px"; imgs[i].style.top = -getpoint(c,90*i/(imgs.length-1)).top+"px"; } }else{ for(i=0;i<imgs.length;i++){ imgs[i].style.transition=".5s "+((imgs.length-1-i)*0.1)+"s "; imgs[i].style.transform=" rotate(0) scale(1)"; imgs[i].style.left = "0px"; imgs[i].style.top = "0px"; } this.style.transform= "rotate(0deg)"; } flag=!flag; } } //已知一条边和一个角 求它的x y function getpoint(c,deg){ //角度转弧度公式 三角函数 var left=Math.round(c*Math.sin(deg*Math.PI/180)); var top=Math.round(c*Math.cos(deg*Math.PI/180)); return { left:left, top:top } } </script>