扇形导航 html svg

项目设计到写个扇形的导航弄了好久记录一下

<body><div class="header-top"> </div><div class="container"> <svg id="svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="400px" height="400px"><defs><filter id="linear" x="0" y="0" width="200%" height="200%"><feOffset result="offOut" in=" " dx="20" dy="20" /><feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" /><feBlend in="SourceGraphic" in2="blurOut" mode="normal" /></filter></defs><path class="paths" stroke="#068be7" stroke-width="1" fill="#000b40" filter="url(#linear)" /><path class="paths" stroke="#068be7" stroke-width="1" fill="#000b40" filter="url(#linear)" /><path class="paths" stroke="#068be7" stroke-width="1" fill="#000b40" filter="url(#linear)" /><path class="paths" stroke="#068be7" stroke-width="1" fill="#000b40" filter="url(#linear)" /><path class="paths" stroke="#068be7" stroke-width="1" fill="#000b40" filter="url(#linear)" /><path class="paths" stroke="#068be7" stroke-width="1" fill="#000b40" filter="url(#linear)" /><path class="paths" stroke="#068be7" stroke-width="1" fill="#000b40" filter="url(#linear)" /><path class="paths" stroke="#068be7" stroke-width="1" fill="#000b40" filter="url(#linear)" /><path class="paths" stroke="#068be7" stroke-width="1" fill="#000b40" filter="url(#linear)" /><path class="paths" stroke="#068be7" stroke-width="1" fill="#000b40" filter="url(#linear)" /><foreignObject class='center'><a href=""><!-- <img src="t.png" /> --><img src="./img/center.png" alt=""></a></foreignObject><foreignObject class='list'><div><i class="fa fa-calendar" aria-hidden="true"></i><p>1</p></div></foreignObject><foreignObject class='list'><div><i class="fa fa-bell-o" aria-hidden="true"></i><p>2</p></div></foreignObject><foreignObject class='list'><div><i class="fa fa-calendar-plus-o" aria-hidden="true"></i><p>3</p>  </div></foreignObject><foreignObject class='list'><div><i class="fa fa-bus" aria-hidden="true"></i><p>4</p></div></foreignObject><foreignObject class='list'><div><i class="fa fa-desktop" aria-hidden="true"></i><p>5</p></div></foreignObject><foreignObject class='list'><div><i class="fa fa-edit" aria-hidden="true"></i><p>6</p></div></foreignObject><foreignObject class='list'><div><i class="fa fa-hdd-o" aria-hidden="true"></i><p>7</p></div></foreignObject><foreignObject class='list'><div><i class="fa fa-image" aria-hidden="true"></i><p>8</p></div></foreignObject><foreignObject class='list'><div><i class="fa fa-calendar1" aria-hidden="true"></i><p>9/p></div></foreignObject><foreignObject class='list'><div><i class="fa fa-bell-o1" aria-hidden="true"></i><p>10</p></div></foreignObject></svg></div>
</body>

<script type="text/javascript">Object.defineProperties(window, {El: {value: function (el) {return document.querySelector(el)},enumerable: false},Els: {value: function (el) {return document.querySelectorAll(el)},enumerable: false}})init();window.onresize = function () {init();}function init() {//宽高为当前页面的40%El(".container").style.width = document.body.clientWidth * .8 + 'px';El(".container").style.height = document.body.clientWidth * .5 + 'px';var contW = El(".container").style.width,contH = El(".container").style.height;//svg自适应El("#svg").setAttribute('width', contW)El("#svg").setAttribute('height', contH)//中间图形自适应El(".center").setAttribute('x', (contW.split('px')[0] / 2 - contW.split('px')[0] / 4) - 150)El(".center").setAttribute('y', (contW.split('px')[0] / 2 - contW.split('px')[0] / 4) - 150)El(".center").setAttribute('width', (contW.split('px')[0] / 2) + 300)El(".center").setAttribute('height', (contW.split('px')[0] / 2) + 300)mkChart();}function mkChart() {//配置各种宽高var svgWsm = El("#svg").clientWidth - 100,svgHsm = El("#svg").clientHeight - 100,svgW2 = svgWsm / 2,svgH2 = svgWsm / 2,svgW = El("#svg").clientWidth,svgH = El("#svg").clientHeight,djx = Math.sqrt(Math.pow(svgW2, 2) + Math.pow(svgH2, 2)),djxW = Math.sqrt(Math.pow(djx - svgW2, 2) / 2);var ds = `M${svgW2 + 50} ${svgH2 + 50} L440 129 A ${svgW2} ${svgH2} 0 0 0 ${djxW + 50} ${djxW + 50} Z`;//循环扇形Els(".paths").forEach((item, index) => {item.setAttribute("d", ds);//自己旋转item.style.transform = `rotate(${18 * index - 45}deg)  `;item.style.transformOrigin = `${svgW2 + 50}px ${svgH2 + 50}px`;//触碰// item.onmouseenter = () => {//     //扇形放大//    item.style.transform = `rotate(${18*index-45}deg) scale(1.1)`;//     //里面内容同步放大//    Els('.list')[index].style.transform = `rotate(${15*index-55}deg) scale(1.05)`;// }// item.onmouseleave = () => {//    //还原//  item.style.transform = `rotate(${18*index-45}deg)`;//    Els('.list')[index].style.transform = `rotate(${15*index-55}deg)`;// }})//循环扇形内容Els('.list').forEach((item, index) => {//自己旋转item.style.transform = `rotate(${18 * index - 77}deg)   `;item.style.transformOrigin = `${svgW2 + 50}px ${svgH2 + 50}px`;//子元素反旋转显示正位item.children[0].style.transform = `rotate(${-18 * index + 77}deg)`;//触碰item.onmouseenter = () => {//外层同步放大Els('.paths')[index].style.transform = `rotate(${18 * index - 45}deg) scale(1.05)`;//内层放大item.style.transform = `rotate(${18 * index - 77}deg) ) scale(1)`;}item.onmouseleave = () => {//还原Els('.paths')[index].style.transform = `rotate(${18 * index - 45}deg) `;item.style.transform = `rotate(${18 * index - 77}deg) `;}//里面的位置item.setAttribute('x', svgW / 2 - svgW / 9);item.setAttribute('y', svgH / 10);item.setAttribute('width', svgW / 6);item.setAttribute('height', svgH / 4);})//中间事件// El(".center>a").onclick = () => {//  alert("中间事件")// }}</script>

* {margin: 0;padding: 0;}
body{background:url("../img/u50_state0.jpg") no-repeat center #0b1341 ;background-size: cover;height: 100vh;overflow: hidden;
position: relative;
}.container {position: absolute;right: 0;left: 0;bottom: -60px;margin: auto;}.header-top{width: 100%;height: 100px;position: absolute;background:url("../img/u52.png") no-repeat center ;background-size: cover;text-align: center;color: #fff;line-height: 58px;font-size: 30px;font-weight: bold;
}#svg path {transition: transform .2s;color: white;cursor: pointer;
}#svg .center {border-radius: 50%; }#svg .center img {width: 100%;height: 100%;
}#svg .list {transition: transform .2s;cursor: pointer;/* background: url("../img/bj.png") no-repeat center;background-size: contain;  */
}#svg .list div {text-align: center;color: #589bfc;padding: 20px 70px;display: flex;flex-direction: column;justify-content: center;align-items: center;
}
#svg .list div a{color: #589bfc;text-decoration: none;
}.fa{width: 50px;height: 50px;margin-bottom: 5px;
}

扇形导航 html svg相关推荐

html的扇形代码导航,CSS3--利用transform和transition属性制作扇形导航
在前面,我们已经讲解了transform这个属性以及案例,那么本文会进一步结合transform和transition两个属性,并制作一个简单的案例进行说明. 一.transition属性说明接下来 ...
html5 扇形导航效果图,js+css实现扇形导航效果
本文实例为大家分享了js+css实现扇形导航效果的具体代码,供大家参考,具体内容如下\ 扇形导航 *{ margin: 0; padding: 0; } html,body{ height: 100% ...
web前端：扇形导航，三角函数sinθ对边x轴，cosθ邻边y轴计算原生实现
1.三角函数原理分析 2.less定义布局 * {margin: 0;padding: 0;//找子选择器css:#id > .class {}body {//取消滚动条显示height: 10 ...
android底部导航栏svg,vue开发移动端底部导航条功能
效果图 src/app.vue 头部导航内容区域 import Tabbar from 'components/tabbar'; export default { name: 'App', comp ...
java 扇形_扇形导航 css3
本篇文章将通过对css3中的2d变化以及过渡进行分析设计先放上最终效果图功能实现:1.给扇形home元素设置点击事件并添加2d旋转 2.给导航栏设置2d旋转并通过三角函数计算出各个导航位置 3. ...
html3d扇形菜单,扇形菜单特效
扇形导航 *{ margin: 0; padding: 0; } a { text-align: right; text-decoration: none; color: #000 !importan ...
HTML5和CSS3一些基本概括
html5 1.新增了语义化标签语言,语义.语言的意义就是标签的意义意思就是这个标签的单词的意思就是他在页面中所充当角色的意思 header 头部 nav 导航 main 主要内容 footer ...
前端HTML5视频_CSS3-张晓飞-专题视频课程
前端HTML5视频_CSS3-305人已学习课程介绍本套视频旨在向学员全面剖析css3中的新增的各类属性与方案.深入了解预处理less,并从源码的角度解读bootstrap相关实现 ...
HTML 框架、列表和table标签练习第二个模块2
HTML 框架和table标签练习 HTML 框架 iframe标签案例07 HTML 列表无序列表案例08 有序列表列表嵌套案例9 作业作业1制作方块导航器作业2使用table实现如下 ...

扇形导航 html svg

扇形导航 html svg相关推荐

最新文章

热门文章