jquery实现圆形图标菜单导航效果代码
代码语言:html
所属分类:菜单导航
代码描述:jquery实现圆形图标菜单导航效果代码,请在大屏中预览
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css"> <style> body, html { font-size: 100%; padding: 0; margin: 0;} /* Reset */ *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */ .clearfix:before, .clearfix:after { content: " "; display: table; } .clearfix:after { clear: both; } body{ background: #494A5F; color: #D5D6E2; font-weight: 500; font-size: 1.05em; font-family: "Microsoft YaHei","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif; } /* create by nasir farhadi email : nasirfarhadi92@gmail.com Github : nasirfarhadi92 */ .holderCircle{ width:500px; height:500px; border-radius:100%; margin:60px auto; position:relative; } /* .holderCircle::after{ content:''; width:500px; height:500px; border-radius:100%; border:1px solid #000; position:absolute; top:0; } */ .dotCircle{ width:100%; height:100%; position:absolute; margin:auto; top:0; left:0; right:0; bottom:0; border-radius:100%; z-index:20; } .dotCircle .itemDot{ display:block; width:80px; height:80px; position:absolute; background:#ddd; color:#fff; border-radius:100%; text-align: center; line-height: 80px; font-size:30px; z-index:3; cursor:pointer; } .dotCircle .itemDot::after { content:""; width: 82px; height: 82px; position: absolute; border-radius: 100%; top: 0; left: 0; right: 0; margin: auto; z-index:2; border:3px solid #fff; } .dotCircle .itemDot::before{ content:""; width: 85px; height: 85px; position: absolute; border-radius: 100%; top: 0; left: 0; right: 0; margin: auto; z-index:2; border:3px solid; } .dotCircle .itemDot1{ background:#ffb048; } .dotCircle .itemDot1::after { } .dotCircle .itemDot1::before{ border-color:#ffb048 } .dotCircle .itemDot2{ background:#28a9e0; } .dotCircle .itemDot2::after { } .dotCircle .itemDot2::before{ border-color:#28a9e0; } .dotCircle .itemDot3{ background:#89c445; } .dotCircle .itemDot3::after { } .dotCircle .itemDot3::before{ border-color:#89c445; } .dotCircle .itemDot4{ background:#fca72b; } .dotCircle .itemDot4::after { } .dotCircle .itemDot4::before{ border-color:#fca72b; } .dotCircle .itemDot5{ background:#3dbea0; } .dotCircle .itemDot5::after { } .dotCircle .itemDot5::before{ border-color:#3dbea0; } .dotCircle .itemDot6{ background:#aa229d; } .dotCircle .itemDot6::after { } .dotCircle .itemDot6::before{ border-color:#aa229d; } .dotCircle .itemDot7{ background:#e06410; } .dotCircle .itemDot7::after { } .dotCircle .itemDot7::before{ border-color:#e06410; } .dotCircle .itemDot8{ background:#1362b7; } .dotCircle .itemDot8::after { } .dotCircle .itemDot8::before{ border-color:#1362b7; } .dotCircle .itemDot9{ background:#e52c47; } .dotCircle .itemDot9::after { } .dotCircle .itemDot9::before{ border-color:#e52c47; } .dotCircle .itemDot10{ background:#fe4491; } .dotCircle .itemDot10::after{ } .dotCircle .itemDot10::before{ border-color:#fe4491; } .dotCircle .itemDot.active{ background:#34495e; color:#fff; transition:0.5s; } .dotCircle .itemDot.active::before{ border-color:#34495e; } .dotCircle .itemDot .forActive{ width:56px; height:56px; position:absolute; top:0; left:0; right:0; bottom:0; display:none; } .dotCircle .itemDot .forActive::after{ content: ''; width: 5px; height: 5px; border: 3px solid #FE9290; bottom: -31px; left: -14px; filter: blur(1px); position: absolute; border-radius: 100%; } .dotCircle .itemDot .forActive::before{ content: ''; width: 6px; height: 6px; filter: blur(5px); top: -15px; position: absolute; transform: rotate(-45deg); border: 6px solid #F48E2A; right: -39px; } .dotCircle .itemDot.active .forActive{ display:block; } .dotCircle .itemDot:hover{ background:#34495e; color:#fff; transition:0.5s; } .dotCircle .itemDot:hover::before{ border-color:#34495e; } .contentCircle{ width: 250px; height: 250px; border-radius: 100%; background: url(../img/bgcircle.png) no-repeat; color: #fff; position: relative; top: 137px; right: 0; bottom: 0; left: 0; box-shadow: 0px 0px 69px 1px #2b152e; margin: auto; } .contentCircle .CirItem{ border-radius: 100%; color: #fff; position: absolute; text-align: center; bottom: 0; left: 0; opacity: 0; transform: scale(0); transition: 0.5s; font-weight: bold; font-size: 13px; width: 100%; height: 100%; top: 0; right: 0; margin: auto; background: #00000054; line-height: 250px; } .CirItem.active{ z-index:1; opacity:1; transform:scale(1); transition:0.5s; } .contentCircle .CirItem1{ background:rgba(255, 176, 72, 0.83); } .contentCircle .CirItem1::after, .contentCircle .CirItem2::after, .contentCircle .CirItem3::after, .contentCircle .CirItem4::after, .contentCircle .CirItem5::after, .contentCircle .CirItem6::after, .contentCircle .CirItem7::after, .contentCircle .CirItem8::after, .contentCircle .CirItem9::after, .contentCircle .CirItem10::after{ content:''; width:50%; height:100%; border-bottom-left-radius: 250px; border-top-left-radius: 250px; position:absolute; top:0; left:0; z-index:-1; background:rgba(0, 0, 0, 0.33); } .contentCircle .CirItem2{ background:rgba(40, 169, 224, 0.83); } .contentCircle .CirItem3{ background:rgba(137, 196, 69, 0.83); } .contentCircle .CirItem4{ background:rgba(252, 167, 43, 0.83); } .contentCircle .CirItem5{ background:rgba(61, 190, 160, 0.83); } .contentCircle .CirItem6{ background.........完整代码请登录后点击上方下载按钮下载查看
网友评论0