/*最外面的环*/
#menuCircle { position: absolute; bottom: 0; right: 0; pointer-events: none; /*color: rgb(59,235,235);*/ color:#FFF; z-index: 999999999;  }
#menuCircle, #menuRing { /*height: 300px; width: 300px;*/ height: 251px; width: 251px; }

/*菜单项*/
#menuRing {height: 249px; width: 249px; border-radius:50%; opacity: 0.5; border: 1px solid rgba(59,235,235,0.2); transform-origin: 50% 50%; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform: scale(0) rotate(-270deg); -webkit-transform: scale(0) rotate(-270deg); -moz-transform: scale(0) rotate(-270deg); -ms-transform: scale(0) rotate(-270deg); -o-transform: scale(0) rotate(-270deg); transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; }
.open #menuRing { pointer-events: auto; background-color: rgba(0,0,0,0.3); opacity: 1; transform: scale(1) rotate(0); -webkit-transform: scale(1) rotate(0); -moz-transform: scale(1) rotate(0); -o-transform: scale(1) rotate(0); -ms-transform: scale(1) rotate(0);  }
.menuItem { width: 48px; height: 48px; margin-left: -19px; margin-top: -19px; position: absolute; text-align:center;  }
    .menuItem p { font-size: 20px; vertical-align: top; margin: 0; padding: 0; }
    .menuItem .itemTitle { font-size: 12px; font-family:'Microsoft YaHei'; }
/*#breatheBall { pointer-events:auto; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 50px; height: 50px; border: 1px solid #2b92d4; border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,0.3); background-image: -webkit-gradient(linear, left top, left bottom, from(#0AB2FC), to(#21a1d0)); animation: breathe 2700ms alternate ease-out infinite; -webkit-animation: breathe 2700ms alternate ease-out infinite; -moz-animation: breathe 2700ms alternate ease-out infinite; -ms-animation: breathe 2700ms alternate ease-out infinite; -o-animation: breathe 2700ms alternate ease-out infinite; }*/
/*#breatheBall {  border: 1px solid #2b92d4; border-radius: 60% 5%; box-shadow: 0 1px 2px rgba(0,0,0,0.3); background-image: -webkit-gradient(linear, left top, left bottom, from( #21cb13), to(#7df51f)); animation: breathe 2700ms alternate ease-out infinite; -webkit-animation: breathe 2700ms alternate ease-out infinite; -moz-animation: breathe 2700ms alternate ease-out infinite; -ms-animation: breathe 2700ms alternate ease-out infinite; -o-animation: breathe 2700ms alternate ease-out infinite; pointer-events:auto; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 50px; height: 50px;}*/
#breatheBall { position: relative; border-radius: 50% 50%; background: radial-gradient(ellipse at center,rgba(59,235,235,1),#024f33 /*,rgba(255,255,255,0.5)*/ ); 
               animation: breathe 2700ms alternate ease-out infinite; -webkit-animation: breathe 2700ms alternate ease-out infinite; -moz-animation: breathe 2700ms alternate ease-out infinite; -ms-animation: breathe 2700ms alternate ease-out infinite; -o-animation: breathe 2700ms alternate ease-out infinite; pointer-events: auto; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 50px; height: 50px; }
    #breatheBall .breatheBallCentre { padding: 20% 0; font-size: 30px; line-height: 30px; text-align: center; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; animation: centreShow 5s; -moz-animation: centreShow 5s; -webkit-animation: centreShow 5s; }

/*选择多级菜单动画*/
.itemRingRotate { animation: ringRotate 500ms; -webkit-animation: ringRotate 500ms; -moz-animation: ringRotate 500ms; -o-animation: ringRotate 500ms; }
.itemRingRotate1 { animation: ringRotate1 500ms; -webkit-animation: ringRotate1 500ms; -moz-animation: ringRotate1 500ms; -o-animation: ringRotate1 500ms; }
.itemRingFade .menuItem { animation: centreShow 1s; -webkit-animation: centreShow 1s; -moz-animation: centreShow 1s; -o-animation: centreShow 1s; }

/*伪彩的Image项*/
.pseudocolor { pointer-events:none; width:30px; border-radius: 10%;display:block;margin:0 auto;}

/***呼吸球动画*/
@keyframes breathe {
    0% { opacity: 0.2; box-shadow: 0 1px 2px rgba(255,255,255,0.1); }
    /*100% { opacity: 1; border: 1px solid rgba(59,235,235,1); box-shadow: 0 0 30px #07f70c; }*/
    100% { opacity: 1;  box-shadow: 0 1px 30px rgba(59,255,255,1); }
}

@-webkit-keyframes breathe {
    0% { opacity: 0.2; box-shadow: 0 1px 2px rgba(255,255,255,0.1); }
    100% { opacity: 1; box-shadow: 0 1px 30px rgba(59,255,255,1); }
}

@-moz-keyframes breathe {
    0% { opacity: 0.2; box-shadow: 0 1px 2px rgba(255,255,255,0.1); }
    100% { opacity: 1;box-shadow: 0 1px 30px rgba(59,255,255,1); }
}


/*中心图标显示动画*/
@keyframes centreShow {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@-webkit-keyframes centreShow {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@-moz-keyframes centreShow {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/**环形多级菜单动画1*/
@keyframes ringRotate {
    0% { transform: rotate(0deg); -webkit-transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@-webkit-keyframes ringRotate {
    0% { transform: rotate(0deg); -webkit-transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@-moz-keyframes ringRotate {
    0% { transform: rotate(0deg); -webkit-transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
/**环形多级菜单动画2*/
@keyframes ringRotate1 {
    0% { transform: rotate(0deg); -webkit-transform: rotate(0deg); }
    100% { transform: rotate(-360deg); }
}

@-webkit-keyframes ringRotate1 {
    0% { transform: rotate(0deg); -webkit-transform: rotate(0deg); }
    100% { transform: rotate(-360deg); }
}

@-moz-keyframes ringRotate1 {
    0% { transform: rotate(0deg); -webkit-transform: rotate(0deg); }
    100% { transform: rotate(-360deg); }
}
/**环形多级菜单动画3*/
@keyframes ringfade {
    0% { transform: rotate(0deg); -webkit-transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@-webkit-keyframes ringfade {
    0% { transform: rotate(0deg); -webkit-transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@-moz-keyframes ringfade {
    0% { transform: rotate(0deg); -webkit-transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}