本篇文章将通过对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){  var distance=getpoint(c,90*i/(imgs.length-1));
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 = -distance.left+"px";
imgs[i].style.top = -distance.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>

  

扇形导航 css3的更多相关文章

  1. CSS3_扇形导航_transitionend 事件

    扇形导航 圆形按钮,切换一系列图片导航的显示与隐藏. 如果涉及过渡动画,定位的 top 和 left 必须写 Math.sin(弧度) 一圈弧度 = 2π,一圈角度 = 360 弧度 = (deg*2 ...

  2. 原生js实现扇形导航以及动画的坑

    第一次发博客,有点紧张.首先来一张效果图. 主要是实现了点击右下角的风扇按钮实现了: 导航栏的开启与关闭,中间伴随着 transition过渡以及transform的2D动画. 上源码: <!D ...

  3. CSS3 教程

    CSS3 教程 CSS 用于控制网页的样式和布局. CSS3 是最新的 CSS 标准. 本教程向您讲解 CSS3 中的新特性. 开始学习 CSS3!  更多:http://www.runoob.com ...

  4. 基于CSS3金属风格下拉菜单

    基于CSS3金属风格下拉菜单,css,金属风格,下拉菜单,CSS3导航. css3按钮:http://www.huiyi8.com/css3/anniu/

  5. css3立体旋转菜单

    css3立体旋转菜单,css3,3D,立体旋转,立体菜单,菜单导航,css3立体旋转菜单是一款纯css3实现的三维立体旋转导航菜单. 源码下载页:http://www.huiyi8.com/sc/71 ...

  6. CSS3实现扇形动画菜单特效

    CSS3实现扇形动画菜单特效 效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html> <head> <meta charset=&q ...

  7. css3制作扇形菜单

    工作中网页中有一个扇形的导航菜单,以前没有接触过,参考了http://www.w3cplus.com/css3/building-a-circular-navigation-with-css-tran ...

  8. css3圆环百分比,菜单栏定位导航

    前段时间,社区个人中心改版,看了下设计图,当时隐约感觉到有两个地方(圆环百分比,菜单栏定位导航)比较麻烦.设计图大致如下: 首先看圆环百分比,网上的做法大致分两种,一种是用了CSS3中的transfo ...

  9. 使用CSS3制作导航条和毛玻璃效果

    导航条对于每一个Web前端攻城狮来说并不陌生,但是毛玻璃可能会相对陌生一些.简单的说,毛玻璃其实就是让图片或者背景使用相应的方法进行模糊处理.这种效果对用户来说是十分具有视觉冲击力的. 本次分享的主题 ...

随机推荐

  1. Java程序,JVM之间的关系

    java程序是跑在JVM上的,严格来讲,是跑在JVM实例上的.一个JVM实例其实就是JVM跑起来的进程,二者合起来称之为一个JAVA进程.各个JVM实例之间是相互隔离的. 每个java程序都运行于某个 ...

  2. 学习曲线(learning curves)

    假定假设函数为一个二次函数,只是参数未定: 每给定一个样本大小,就能训练出对应的假设函数,从而利用这个假设函数可以计算出Jtrain(仍然在之前拿来训练的那些样本里面),然后将训练好的假设函数用在全部 ...

  3. Android 6.0动态权限申请

    转载(Android 6.0 动态权限申请简单简洁优雅的处理方式): https://blog.csdn.net/lin_dianwei/article/details/79025324

  4. tinymq学习小结

    学了tinymq, 先将它的README翻译了一下: TinyMQ - A diminutive message queue (TinyMQ ---一个小型的消息队列) TinyMQ是一个为erlan ...

  5. 线性回归和正则化(Regularization)

    python风控建模实战lendingClub(博主录制,包含大量回归建模脚本和和正则化解释,2K超清分辨率) https://study.163.com/course/courseMain.htm? ...

  6. redhat下配置SEED DVS6446开发环境1

    Linux NFS服务详解   1.什么是NFS(Network FileSystem)  NFS 就是 Network FileSystem 的缩写,最早之前是由 Sun 所发展出来的.他最大的 功 ...

  7. 跨域请求配置 Amazon AWS S3 腾讯云 阿里云 COS OSS 文件桶解决方案以及推荐 Lebal:Research

    跨域请求配置 跨域请求指的就是不同的域名和端口之间的访问.由于 ajax 的同源策略影响.跨域请求默认是不被允许的. 使用@font-face外挂字体时,可能遇到跨域请求CROS问题:F12控制台报错 ...

  8. Delphi中基本控件之SaveDialog控件的使用总结

    首先向Form窗体拖一个SaveDialog控件,Name属性改为:dlgSave,然后添加一个按钮,Caption属性改为:浏览,Name属性改为:btnBrowse. 然后双击浏览按钮添加如下代码 ...

  9. 正确关闭selinux

    .查看当前selinux的状态命令为 getenforce .两个都要关.注意先看看有么有这两个文件,如果没有就创建一个,否则后期会出现很多问题 cat > /etc/selinux/confi ...

  10. zabbix使用脚本监控

    参照:http://www.cnblogs.com/zhongkai-27/p/9984597.html