背景:
实现圆形图标菜单,中间一个大圆圈,周围是小圆圈
先上效果图
原理: 只需要找到对应的位置即可
项目结构:
代码:
资源代码传送门
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>