扇形导航 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前端攻城狮来说并不陌生,但是毛玻璃可能会相对陌生一些.简单的说,毛玻璃其实就是让图片或者背景使用相应的方法进行模糊处理.这种效果对用户来说是十分具有视觉冲击力的. 本次分享的主题 ...
随机推荐
- C++入门经典-例5.17-右值引用的定义
1:右值引用的定义: 类型 && i=被引用的对象: 左值与右值的区别在于,右值是临时变量,例如,函数的返回值,并且无法被改变. 当右值引用被初始化后,临时变量消失. 代码如下: // ...
- debug1: Could not open authorized keys
ssh登录的时候一直日志一直出现debug1: Could not open authorized keys登录不上,检查文件夹权限都正常用这条命令解决了 restorecon -FRvv /home ...
- java JIT
JVM 即时编译器即时编译器 (Just In Time Compiler) 简称JIT JAVA程序最初是通过解释器 (Interpreter) 进行解释执行的,当 JVM 发现某个方法或代码块运行 ...
- Cas服务器以及客户端搭建
一.搭建cas服务器 官网:http://jasig.github.io/cas/ Cas Server 下载:http://developer.jasig.org/cas/ Cas Client 下 ...
- 全面解读PHP-JS和jQuery
一.变量的定义 1.未使用值来申明的变量,其值为 undefined. 2.如果重新声明一个变量,该变量的值不会丢失. //定义一个变量 var str = 'hello'; //重新申明 var s ...
- 统计学_样本量估计_python代码实现
python机器学习-乳腺癌细胞挖掘(博主亲自录制视频)https://study.163.com/course/introduction.htm?courseId=1005269003&ut ...
- leetcode 289生命游戏
class Solution { public: vector<vector<,},{,},{,},{,-},{,-},{-,-},{-,},{-,}}; void gameOfLife( ...
- 浏览器端-W3School-HTML:HTML DOM Meta 对象
ylbtech-浏览器端-W3School-HTML:HTML DOM Meta 对象 1.返回顶部 1. HTML DOM Meta 对象 Meta 对象 Meta 对象代表 HTML 的 一个 & ...
- Jmeter(十三) JDBC Request
Jmeter中取样器(Sampler)是与服务器进行交互的单元.一个取样器通常进行三部分的工作:向服务器发送请求,记录服务器的响应数据和记录响应时间信息 有时候工作中我们需要对数据库发起请求或者对数据 ...
- 三十五:数据库之SQLAlchemy外建之一对多关系
准备工作 from sqlalchemy import create_engine, Column, Integer, String, Float, Text, ForeignKeyfrom sqla ...