扇形导航 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代码如下
<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的更多相关文章
- CSS3_扇形导航_transitionend 事件
扇形导航 圆形按钮,切换一系列图片导航的显示与隐藏. 如果涉及过渡动画,定位的 top 和 left 必须写 Math.sin(弧度) 一圈弧度 = 2π,一圈角度 = 360 弧度 = (deg*2 ...
- 原生js实现扇形导航以及动画的坑
第一次发博客,有点紧张.首先来一张效果图. 主要是实现了点击右下角的风扇按钮实现了: 导航栏的开启与关闭,中间伴随着 transition过渡以及transform的2D动画. 上源码: <!D ...
- CSS3 教程
CSS3 教程 CSS 用于控制网页的样式和布局. CSS3 是最新的 CSS 标准. 本教程向您讲解 CSS3 中的新特性. 开始学习 CSS3! 更多:http://www.runoob.com ...
- 基于CSS3金属风格下拉菜单
基于CSS3金属风格下拉菜单,css,金属风格,下拉菜单,CSS3导航. css3按钮:http://www.huiyi8.com/css3/anniu/
- css3立体旋转菜单
css3立体旋转菜单,css3,3D,立体旋转,立体菜单,菜单导航,css3立体旋转菜单是一款纯css3实现的三维立体旋转导航菜单. 源码下载页:http://www.huiyi8.com/sc/71 ...
- CSS3实现扇形动画菜单特效
CSS3实现扇形动画菜单特效 效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html> <head> <meta charset=&q ...
- css3制作扇形菜单
工作中网页中有一个扇形的导航菜单,以前没有接触过,参考了http://www.w3cplus.com/css3/building-a-circular-navigation-with-css-tran ...
- css3圆环百分比,菜单栏定位导航
前段时间,社区个人中心改版,看了下设计图,当时隐约感觉到有两个地方(圆环百分比,菜单栏定位导航)比较麻烦.设计图大致如下: 首先看圆环百分比,网上的做法大致分两种,一种是用了CSS3中的transfo ...
- 使用CSS3制作导航条和毛玻璃效果
导航条对于每一个Web前端攻城狮来说并不陌生,但是毛玻璃可能会相对陌生一些.简单的说,毛玻璃其实就是让图片或者背景使用相应的方法进行模糊处理.这种效果对用户来说是十分具有视觉冲击力的. 本次分享的主题 ...
随机推荐
- Java程序,JVM之间的关系
java程序是跑在JVM上的,严格来讲,是跑在JVM实例上的.一个JVM实例其实就是JVM跑起来的进程,二者合起来称之为一个JAVA进程.各个JVM实例之间是相互隔离的. 每个java程序都运行于某个 ...
- 学习曲线(learning curves)
假定假设函数为一个二次函数,只是参数未定: 每给定一个样本大小,就能训练出对应的假设函数,从而利用这个假设函数可以计算出Jtrain(仍然在之前拿来训练的那些样本里面),然后将训练好的假设函数用在全部 ...
- Android 6.0动态权限申请
转载(Android 6.0 动态权限申请简单简洁优雅的处理方式): https://blog.csdn.net/lin_dianwei/article/details/79025324
- tinymq学习小结
学了tinymq, 先将它的README翻译了一下: TinyMQ - A diminutive message queue (TinyMQ ---一个小型的消息队列) TinyMQ是一个为erlan ...
- 线性回归和正则化(Regularization)
python风控建模实战lendingClub(博主录制,包含大量回归建模脚本和和正则化解释,2K超清分辨率) https://study.163.com/course/courseMain.htm? ...
- redhat下配置SEED DVS6446开发环境1
Linux NFS服务详解 1.什么是NFS(Network FileSystem) NFS 就是 Network FileSystem 的缩写,最早之前是由 Sun 所发展出来的.他最大的 功 ...
- 跨域请求配置 Amazon AWS S3 腾讯云 阿里云 COS OSS 文件桶解决方案以及推荐 Lebal:Research
跨域请求配置 跨域请求指的就是不同的域名和端口之间的访问.由于 ajax 的同源策略影响.跨域请求默认是不被允许的. 使用@font-face外挂字体时,可能遇到跨域请求CROS问题:F12控制台报错 ...
- Delphi中基本控件之SaveDialog控件的使用总结
首先向Form窗体拖一个SaveDialog控件,Name属性改为:dlgSave,然后添加一个按钮,Caption属性改为:浏览,Name属性改为:btnBrowse. 然后双击浏览按钮添加如下代码 ...
- 正确关闭selinux
.查看当前selinux的状态命令为 getenforce .两个都要关.注意先看看有么有这两个文件,如果没有就创建一个,否则后期会出现很多问题 cat > /etc/selinux/confi ...
- zabbix使用脚本监控
参照:http://www.cnblogs.com/zhongkai-27/p/9984597.html