优化用户体验：圆形菜单在前端与Adobe Flash Player中的应用探索

背景：
实现圆形图标菜单，中间一个大圆圈，周围是小圆圈
先上效果图

项目结构:

代码:

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;}@mediaonly 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;}}@mediaonly screen and(min-width: 600px)and(max-width: 767px){}@mediaonly screen and(min-width: 768px)and(max-width: 991px){}@mediaonly screen and(min-width: 992px)and(max-width: 1199px){}@mediaonly screen and(min-width: 1200px)and(max-width: 1499px){}@mediaonly 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:  */.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

<!DOCTYPEhtml><htmllang="zh"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge,chrome=1"><metaname="viewport"content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"><title>智慧水务管理平台</title><linkrel="stylesheet"type="text/css"href="css/normalize.css"/><linkrel="stylesheet"type="text/css"href="css/demo.css"><linkhref=""rel="stylesheet"><linkrel="stylesheet"href="css/circle.css"></head><body><divclass="topBar"><spanstyle="font-size:38px;">智慧水务管理平台</span></div><divclass="holderCircle"><divclass="dotCircle"><spanclass="itemDot itemDot1"data-tab="1"><iclass="fa fa-life-ring"><pclass="fontName">oa系统</p></i><spanclass="forActive"></span></span><spanclass="itemDot itemDot2"data-tab="2"><iclass="fa fa-bomb"><pclass="fontName">收费系统</p></i><spanclass="forActive"></span></span><spanclass="itemDot itemDot3"data-tab="3"><iclass="fa fa-heartbeat"><pclass="fontName">财务系统</p></i><spanclass="forActive"></span></span><spanclass="itemDot itemDot4"data-tab="4"><iclass="fa fa-leaf"><pclass="fontName">表务系统</p></i><spanclass="forActive"></span></span><spanclass="itemDot itemDot5"data-tab="5"><iclass="fa fa-magic"><pclass="fontName">工程管理</p></i><spanclass="forActive"></span></span><spanclass="itemDot itemDot6"data-tab="6"><iclass="fa fa-pencil-square-o"><pclass="fontName">仓库系统</p></i><spanclass="forActive"></span></span><spanclass="itemDot itemDot7"data-tab="7"><iclass="fa fa-rss-square"><pclass="fontName">客户服务</p></i><spanclass="forActive"></span></span></div><divclass="contentCircle"><divclass="CirItem active">
            智慧水务平台
        </div></div></div><scriptsrc="js/jquery-1.11.0.min.js"type="text/javascript"></script><scriptsrc="js/circle.js"></script></body></html>