css特效弧形菜单

- 日理万妓 2023-05-22 08:50 7阅读 0赞

# 弧度菜单说明 #

demo地址 ：[https://github.com/liu-bluesky/-menu\_arc.git][https_github.com_liu-bluesky_-menu_arc.git]

*  $("\#navs") 外曾大盒子
 *  $("\#navs li") 菜单显示盒子  
    求x、y轴公式

x1(x轴坐标) = x0 +半径 * cos(角度 * PI / 180) 
     y1（x轴坐标） = y0 + 半径 * sin(角度 * PI /180)

(function(){ 
    	var ul=$("#navs"),li=$("#navs li"),i=li.length,n=i-1,r=300;
    	ul.click(function(){ 
    		$(this).toggleClass('active');
    
    		if($(this).hasClass('active')){ 
    			for(var a=0;a<i;a++){ 
    				li.eq(a).css({ 
    					'transition-delay':""+(50*a)+"ms",
    					'-webkit-transition-delay':""+(50*a)+"ms",
    					'-o-transition-delay':""+(50*a)+"ms",
    					'transform':"translate("+(r*Math.cos(90/n*a*(Math.PI/180)))+"px,"+(-r*Math.sin(90/n*a*(Math.PI/180)))+"px",
    					// '-webkit-transform':"translate("+(r*Math.cos(90/n*a*(Math.PI/180)))+"px,"+(-r*Math.sin(90/n*a*(Math.PI/180)))+"px",
    					// '-o-transform':"translate("+(r*Math.cos(90/n*a*(Math.PI/180)))+"px,"+(-r*Math.sin(90/n*a*(Math.PI/180)))+"px",
    					// '-ms-transform':"translate("+(r*Math.cos(90/n*a*(Math.PI/180)))+"px,"+(-r*Math.sin(90/n*a*(Math.PI/180)))+"px"
    				});
    			}
    		}else{ 
    			li.removeAttr('style');
    		}
    	});
    })($);

### 代码解析关键内容xy ###

Math.cos求的是x轴
    (r*Math.cos(90/n*a*(Math.PI/180)))
    n :表示分了几份 这里就是把90度角份了 n份 即x轴坐标分了n个坐标点
    Math.sin求的是y
    (-r*Math.sin(90/n*a*(Math.PI/180)))
    n :表示分了几份 这里就是把90度角份了 n份 即y轴坐标分了n个坐标点
    y是负数 图像就在中心的右上
    y是正数，图像就在右下
    具体原因自己看 translate 原理

### 如何控制其实方向 ###

顺时针
        y = Math.sin(a)
        x = Math.cos(a)
        逆时针
        x = Math.sin(a)
        y = Math.cos(a)

[https_github.com_liu-bluesky_-menu_arc.git]: https://github.com/liu-bluesky/-menu_arc.git

发表评论取消回复

表情：

评论列表（有 0 条评论，7人围观）

还没有评论，来说两句吧...

相关阅读

相关 css特效弧形菜单

弧度菜单说明 demo地址：[https://github.com/liu-bluesky/-menu\_arc.git][https_github.com_liu-b

- 日理万妓/ 2023年05月22日 08:50/ 0 赞/ 8 阅读

相关 CSS聚光灯特效

<h1 data-spotlight="CodingStartup!">CodingStartup</h1> html { font-size:

刺骨的言语ヽ痛彻心扉/ 2023年02月20日 07:40/ 0 赞/ 7 阅读

相关 css 外弧_利用存css实现弧形边界

一般拿到这种需求想到可能存在几种方案：方案一：直接贴图，图片和内容之间的衔接，需要注意 // sass文件 body\{ margin:0; padding:0;

忘是亡心i/ 2023年01月01日 05:47/ 0 赞/ 119 阅读

相关 115.滑动菜单指示器特效

效果 (源码网盘地址在最后) ![5e481c074d9bbdc1c460f890ac354e3c.gif][] 最近开源了一个 Vue 组件，还不够完善，欢迎大家来一

客官°小女子只卖身不卖艺/ 2022年12月27日 12:42/ 0 赞/ 139 阅读

相关 Css 实现漂亮弧形

在实现页面五花八门的有特色的ui时，我们有时会遇到要用实现一个弧形，而这样的弧形要怎么实现呢？用图片？好像不大现实，因为这样就要无故多加载一张图片了，这里我们来说说怎么用css

浅浅的花香味﹌/ 2022年12月23日 00:45/ 0 赞/ 238 阅读

相关纯CSS3液态胶合效果环形菜单特效

![04c3fc73f3f20b30c1429e393b7db64d.png][] 点击上方蓝字关注我哦 ![1a0ad430e00e15c3f7e50869ab3a1c3

秒速五厘米/ 2022年12月08日 06:04/ 0 赞/ 195 阅读

相关 137.菜单悬停放大特效

效果 (源码网盘地址在最后) ![ff3f299b7f0cd1d1dde5b83cbaafffb8.gif][] 最近开源了一个 Vue 组件，还不够完善，欢迎大家来一

曾经终败给现在/ 2022年10月30日 06:24/ 0 赞/ 151 阅读

相关垂直菜单特效--移动端

垂直菜单显示收缩特效–移动端浏览器版 ![这里写图片描述][20160309152028341] 并且实现去除点击事件300ms的阴影效果 css html

た入场券/ 2022年08月20日 13:26/ 0 赞/ 166 阅读

相关优美的移动端菜单特效

模仿大疆官网效果图：点击前 ![70][] 点击后： ![70 1][] <!DOCTYPE html> <html> <head> <meta cha

桃扇骨/ 2022年05月27日 06:38/ 0 赞/ 135 阅读

相关 Css 实现漂亮弧形

> 小编推荐：[Fundebug][]提供JS错误监控、微信小程序错误监控、微信小游戏错误监控，Node.j错误监控和Java错误监控。真的是一个很好用的错误监控费服务，众多大

Dear 丶/ 2022年02月15日 07:06/ 0 赞/ 294 阅读