圆形图标菜单

￡神魔★判官ぃ 2022-10-18 00:52 146阅读 0赞

背景：  
实现圆形图标菜单，中间一个大圆圈，周围是小圆圈  
先上效果图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FkbWluUHdk_size_16_color_FFFFFF_t_70]  
原理: 只需要找到对应的位置即可

项目结构:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FkbWluUHdk_size_16_color_FFFFFF_t_70 1]

代码:  
[资源代码传送门][Link 1]

circle.css

/* 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: 110px;
        height: 110px;
        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: 110px;
        height: 110px;
        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: 110px;
        height: 110px;
        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;
    
    }
    
    .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;
    
        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;
    
        right: -39px;
    }
    
    .dotCircle .itemDot.active .forActive { 
        display: block;
    }
    
    .dotCircle .itemDot:hover { 
        background: #34495e;
        color: #fff;
    
    }
    
    .dotCircle .itemDot:hover::before { 
        border-color: #34495e;
    }
    
    .dotCircle .itemDot i { 
        margin-top: 20%;
    }
    
    .fontName { 
        margin: 0;
        margin-top: 8px;
        font-size: 16px;
    }
    
    .contentCircle { 
        width: 250px;
        height: 250px;
        border-radius: 100%;
        /*background: url(../img/bgcircle.png) no-repeat;*/
        background-color: #1362b7;
        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;
    
        font-weight: bold;
        font-size: 23px;
        width: 100%;
        height: 100%;
        top: 0;
        right: 0;
        margin: auto;
        background: #00000054;
        line-height: 250px;
    }
    
    .CirItem.active { 
        z-index: 1;
        opacity: 1;
    
    }
    
    .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: rgba(170, 34, 157, 0.83);
    }
    
    .contentCircle .CirItem7 { 
        background: rgba(224, 100, 16, 0.83);
    }
    
    .contentCircle .CirItem8 { 
        background: rgba(19, 98, 183, 0.83);
    }
    
    .contentCircle .CirItem9 { 
        background: rgba(229, 44, 71, 0.83);
    }
    
    .contentCircle .CirItem10 { 
        background: rgba(254, 68, 145, 0.83);
    }
    
    .topBar { 
        width:100%;height:50px;margin-top:-50px;
        position: absolute;
        z-index: 100;
    }
    
    .topBar span { 
        margin-top:10px;margin-left:10px;
        text-align: center;
        font-style: italic;
        font-family: 'Microsoft YaHei';
        text-shadow: 0 0 8px #00f7ff;
        color: white;
    }
    
    @media only screen and (min-width: 300px) and (max-width: 599px) { 
    
        .holderCircle { 
            width: 300px;
            height: 300px;
            margin: 110px auto;
        }
    
        .holderCircle::after { 
            width: 100%;
            height: 100%;
        }
    
        .dotCircle { 
            width: 100%;
            height: 100%;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            margin: auto;
    
        }
    
    }
    
    @media only screen and (min-width: 600px) and (max-width: 767px) { 
    
    }
    
    @media only screen and (min-width: 768px) and (max-width: 991px) { 
    
    }
    
    @media only screen and (min-width: 992px) and (max-width: 1199px) { 
    
    }
    
    @media only screen and (min-width: 1200px) and (max-width: 1499px) { 
    
    }
    
    @media only screen and (min-width: 1500px) { 
    
    }

demo.css

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: #015EA4;
    	color: #D5D6E2;
    	font-weight: 500;
    	font-size: 1.05em;
    	font-family: "Microsoft YaHei","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif;
    }

normalize.css

article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { 
        display: block;
    }
    
    audio, canvas, video { 
        display: inline-block;
    }
    
    audio:not([controls]) { 
        display: none;
        height: 0;
    }
    
    [hidden] { 
        display: none;
    }
    
    html { 
        font-family: sans-serif;
        -ms-text-size-adjust: 100%;
        -webkit-text-size-adjust: 100%;
    }
    
    body { 
        margin: 0;
    }
    
    a:focus { 
        outline: thin dotted;
    }
    
    a:active, a:hover { 
        outline: 0;
    }
    
    h1 { 
        font-size: 2em;
        margin: 0.67em 0;
    }
    
    abbr[title] { 
        border-bottom: 1px dotted;
    }
    
    b, strong { 
        font-weight: bold;
    }
    
    dfn { 
        font-style: italic;
    }
    
    hr { 
        -moz-box-sizing: content-box;
        box-sizing: content-box;
        height: 0;
    }
    
    mark { 
        background: #ff0;
        color: #000;
    }
    
    code, kbd, pre, samp { 
        font-family: monospace, serif;
        font-size: 1em;
    }
    
    pre { 
        white-space: pre-wrap;
    }
    
    q { 
        quotes: "\201C" "\201D" "\2018" "\2019";
    }
    
    small { 
        font-size: 80%;
    }
    
    sub, sup { 
        font-size: 75%;
        line-height: 0;
        position: relative;
        vertical-align: baseline;
    }
    
    sup { 
        top: -0.5em;
    }
    
    sub { 
        bottom: -0.25em;
    }
    
    img { 
        border: 0;
    }
    
    svg:not(:root) { 
        overflow: hidden;
    }
    
    figure { 
        margin: 0;
    }
    
    fieldset { 
        border: 1px solid #c0c0c0;
        margin: 0 2px;
        padding: 0.35em 0.625em 0.75em;
    }
    
    legend { 
        border: 0;
        padding: 0;
    }
    
    button, input, select, textarea { 
        font-family: inherit;
        font-size: 100%;
        margin: 0;
    }
    
    button, input { 
        line-height: normal;
    }
    
    button, select { 
        text-transform: none;
    }
    
    button, html input[type="button"], input[type="reset"], input[type="submit"] { 
        -webkit-appearance: button;
        cursor: pointer;
    }
    
    button[disabled], html input[disabled] { 
        cursor: default;
    }
    
    input[type="checkbox"], input[type="radio"] { 
        box-sizing: border-box;
        padding: 0;
    }
    
    input[type="search"] { 
        -webkit-appearance: textfield;
        -moz-box-sizing: content-box;
        -webkit-box-sizing: content-box;
        box-sizing: content-box;
    }
    
    input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { 
        -webkit-appearance: none;
    }
    
    button::-moz-focus-inner, input::-moz-focus-inner { 
        border: 0;
        padding: 0;
    }
    
    textarea { 
        overflow: auto;
        vertical-align: top;
    }
    
    table { 
        border-collapse: collapse;
        border-spacing: 0;
    }

circle.js

$(document).ready(function(){
    	var radius = 200;
    	var fields = $('.itemDot');
    	var container = $('.dotCircle');
    	var width = container.width();
    	radius = width/2.5;
    
    	 var height = container.height();
    	var angle = 0, step = (2*Math.PI) / fields.length;
    	fields.each(function() {
    		var x = Math.round(width/2 + radius * Math.cos(angle) - $(this).width()/2);
    		var y = Math.round(height/2 + radius * Math.sin(angle) - $(this).height()/2);
    		if(window.console) {
    			//console.log($(this).text(), x, y);
    		}
    
    		$(this).css({
    			left: x + 'px',
    			top: y + 'px'
    		});
    		angle += step;
    	});
    
    
    	$('.itemDot').click(function(){
    
    		var dataTab= $(this).data("tab");
    		$('.itemDot').removeClass('active');
    		$(this).addClass('active');
    		//$('.CirItem').removeClass('active');
    		//$( '.CirItem'+ dataTab).addClass('active');
    
    
    		/*$('.dotCircle').css({
    			"transform":"rotate("+(360-(i-1)*36)+"deg)",
    			"transition":"2s"
    		});
    		$('.itemDot').css({
    			"transform":"rotate("+((i-1)*36)+"deg)",
    			"transition":"1s"
    		});*/
    
    
    	});
    
    	/*setInterval(function(){
    		var dataTab= $('.itemDot.active').data("tab");
    		if(dataTab>10||i>10){
    		dataTab=1;
    		i=1;
    		}
    		$('.itemDot').removeClass('active');
    		$('[data-tab="'+i+'"]').addClass('active');
    		$('.CirItem').removeClass('active');
    		$( '.CirItem'+i).addClass('active');
    		i++;
    
    
    		$('.dotCircle').css({
    			"transform":"rotate("+(360-(i-2)*36)+"deg)",
    			"transition":"2s"
    		});
    		$('.itemDot').css({
    			"transform":"rotate("+((i-2)*36)+"deg)",
    			"transition":"1s"
    		});
    
    		}, 5000);*/
    
    });

jquery-1.11.0.min.js 这个自行下载

totalLogin.html

<!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">
        <title>智慧水务管理平台</title>
    
        <link rel="stylesheet" type="text/css" href="css/normalize.css"/>
        <link rel="stylesheet" type="text/css" href="css/demo.css">
    
        <link href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
        <link rel="stylesheet" href="css/circle.css">
    
    </head>
    <body>
    
    <div class="topBar">
        <span style="font-size:38px;">智慧水务管理平台</span>
    </div>
    
    <div class="holderCircle">
    
        <div class="dotCircle">
    		<span class="itemDot itemDot1" data-tab="1">
    			<i class="fa fa-life-ring">
                    <p class="fontName">oa系统</p></i>
    
    			<span class="forActive"></span>
    		</span>
            <span class="itemDot itemDot2" data-tab="2">
    			<i class="fa fa-bomb">
                    <p class="fontName">收费系统</p>
    
                </i>
    			<span class="forActive"></span>
    		</span>
            <span class="itemDot itemDot3" data-tab="3">
    			<i class="fa fa-heartbeat">
                    <p class="fontName">财务系统</p>
    
                </i>
    			<span class="forActive"></span>
    		</span>
            <span class="itemDot itemDot4" data-tab="4">
    			<i class="fa fa-leaf">
                    <p class="fontName">表务系统</p>
                </i>
    			<span class="forActive"></span>
    		</span>
            <span class="itemDot itemDot5" data-tab="5">
    			<i class="fa fa-magic">
                    <p class="fontName">工程管理</p>
                </i>
    			<span class="forActive"></span>
    		</span>
            <span class="itemDot itemDot6" data-tab="6">
    			<i class="fa fa-pencil-square-o">
                    <p class="fontName">仓库系统</p>
                </i>
    			<span class="forActive"></span>
    		</span>
            <span class="itemDot itemDot7" data-tab="7">
    			<i class="fa fa-rss-square">
                    <p class="fontName">客户服务</p>
                </i>
    			<span class="forActive"></span>
    		</span>
        </div>
    
        <div class="contentCircle">
    
            <div class="CirItem active">
                智慧水务平台
            </div>
        </div>
    
    </div>
    
    <script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
    <script src="js/circle.js"></script>
    
    </body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FkbWluUHdk_size_16_color_FFFFFF_t_70]: /images/20221014/45e5de0be6de414d8e6731c2d3fe0c37.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FkbWluUHdk_size_16_color_FFFFFF_t_70 1]: /images/20221014/ba2e21683cdf4dacad61432539c0d875.png
[Link 1]: https://download.csdn.net/download/AdminPwd/19384636