如何制作扇形导航条

浮若梦幻

于 2019-04-14 18:51:27 发布

阅读量654

点赞数

分类专栏： js css 文章标签： js css

本文链接：https://blog.csdn.net/winterdodo/article/details/89299773

版权

本文由浮若梦幻分享，介绍如何利用数学计算，包括勾股定理、三角函数和角度与弧度的转化，结合JavaScript和CSS创建一个扇形导航条。文章包含完整源码，并鼓励读者留言提问。

摘要由CSDN通过智能技术生成

hello 大家好我是浮若梦幻今天给大家带来的是一个前几天刚刚好看到不错的网页然后自己随手写了一写这个扇形导航条的制作希望大家喜欢

其中的原理知识点会配合math 做数学计算

1.勾股定理
2.三角函数
3.角度与弧度的转化

点击展开是这样

一个不错的导航页面配合 js 完成

下面是源码如果有什么不懂欢迎大家留言评论

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			html,body{
				height: 100%;
				overflow: hidden;
			}
			#wrap{
				position: fixed;
				right: 15px;
				bottom: 15px;
				width: 50px;
				height: 50px;
			}
			#wrap > .inner{
				height: 100%;
			}
			#wrap > .inner > img{
				position: absolute;