本篇文章将通过对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. 利用MFC在控件内将txt中的数据画图

    1:采集txt文件中的数据测试程序如下: #include "stdafx.h" #include <fstream> #include "iostream& ...

  2. 选题 Scrum立会报告+燃尽图 05

    此作业要求参见:https://edu.cnblogs.com/campus/nenu/2019fall/homework/8749 一.小组情况组长:贺敬文组员:彭思雨 王志文 位军营 杨萍队名:胜 ...

  3. DB2基础维护手册

    诊断DB2系统性能:db2top -d DEMODB db2top详解:http://blog.sina.com.cn/s/blog_636d62310102v7lm.html

  4. 全面解读php-运算符

    一.运算符的优先级 二.短路作用 本文为袋鼠学习中的总结,如有转载请注明出处:https://www.cnblogs.com/chrdai/p/11074776.html

  5. C# 防火墙操作之启用与关闭

    通过代码操作防火墙的方式有两种:一是代码操作修改注册表启用或关闭防火墙:二是直接操作防火墙对象来启用或关闭防火墙.不论哪一种方式,都需要使用管理员权限,所以操作前需要判断程序是否具有管理员权限. 1. ...

  6. AM中修改套料板的尺寸

  7. 在jsp中出现:Syntax error, insert "Finally" to complete TryStatement错误

    在jsp中出现:Syntax error, insert "Finally" to complete TryStatement错误 可能括号不匹配{}

  8. ceph集群添加osd

    获取osd的ID 这个操作是在管理节点上执行 [root@node-4 osd]# ceph osd create 2 对磁盘做处理 [root@node-4 ~]# parted /dev/sdb ...

  9. layer的iframe弹框中父子元素的传值

    项目中,左侧导航树,右侧是 iframe 嵌套的页面,在右侧页面中又有layer弹框,可以说是有两层 iframe 框架. 所以查询网上的parent什么的方法都不能用.自己摸索的下面的方法: 1.父 ...

  10. 监控Linux服务器上python服务脚本

    提供给公司使用的测试平台这两天频繁地挂掉,影响到相关同事的正常使用,决定在服务器上写个监控脚本,监控到服务挂了就启动起来,一分钟检查一次.注:后台服务使用的是python.监控脚本如下: NUM=`p ...