纯CSS3打造圆形菜单

浏览数：23 / 时间：2015年06月09日

原理是使用相对定位和绝对定位确定圆形菜单位置。

使用伪类选择器E:hover确定悬浮时候的效果，动画效果用CSS3的transition属性。

大概代码如下。

html:

<div id="at-plus-container">
      <div id="bottom-positioner">
        <div id="button">
          <div id="info-bar">
            <div style="display:block" class="info">
              <ul>
                <li title="2人参与讨论" class="page user"><img src="assets/images/people.png"><span>2</span></li>
                <li title="3条评论" class="page comment"><img src="assets/images/comment.png"><span>3</span></li>
                <li title="我有6条评论" class="mine posted"><img src="assets/images/post.png"><span>6</span></li>
                <li title="被赞6次" class="mine like"><img src="assets/images/like.png"><span>6</span></li>
              </ul>
            </div>
          </div>
          <div id="control-ring-container">
            <ul id="control-ring">
              <li title="蒙板" class="mask button"></li>
              <li title="历史记录" class="history button"></li>
              <li title="消息" class="message button"><span class="unread">2</span></li>
              <li title="设置" class="setting button"></li>
              <li title="登录/注册" class="sign button"></li>
            </ul>
          </div>
          <div class="apb">
            <div class="icon"></div>
          </div>
        </div>
      </div>
    </div>

css3:

html,body {
  text-align: center;
  width: 100%;
  height: 100%;
}

ul, li{
  list-style-type: none;
}

#at-plus-container {
  position: relative;
  width: 150px;
  height: 150px;
  top:50%;
  left: 40%;
}
#button {
  width: 50px;
  height: 50px;
}
#button {
  position: relative;
  width: 150px;
  height: 150px;
}

.apb {
  position: absolute;
  top:50%;
  left: 40%;
  width: 25px;
  height: 25px;
  line-height: 50px;
  background: ;
  background: url("assets/images/atplus_white.png") rgba(3,3,3,0.5) no-repeat center;
  background-size: 25px;
  border-radius: 50%;

}

#button:hover .apb {
  width: 50px;
  height: 50px;
  background: url("assets/images/atplus_green.png") rgba(3,3,3,0.5) no-repeat center;
  background-size: 50px;

}

#info-bar {
  opacity: 0;
  border-radius: 50%;
}

#button:hover #info-bar{
  opacity: 1;
  background: rgba(3,3,3,0.5);
  width: 100px;
  height: 100px;
  position: absolute;
  margin: 0;
  padding: 10px;
  top: -50px;
  left: 50px;

  -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
     -ms-transition: all 0.4s ease-in-out;
      -o-transition: all 0.4s ease-in-out;
         transition: all 0.4s ease-in-out;
}

.info {
  position: absolute;
}

#button:hover .page {
  position: absolute;
  top:5px;
}

#button:hover .user {
  left: 5px;
}

#button:hover .comment {
  left: 55%;
}

#button:hover .mine {
  left: 65%;
}

#button:hover .posted {
  top: 25px;
}

#control-ring-container {
  opacity: 0;
  border-radius: 50%;
  width: 130px;
  height: 130px;
}

#button:hover #control-ring-container{
  opacity: 1;
  width: 130px;
  height: 130px;
  position: absolute;
  margin: 0;
  padding: 10px;
  -webkit-transition: all 0.4s ease-in-out;
     -moz-transition: all 0.4s ease-in-out;
      -ms-transition: all 0.4s ease-in-out;
       -o-transition: all 0.4s ease-in-out;
          transition: all 0.4s ease-in-out;
}

.button {
  border-radius: 50%;

}

#button:hover .button {
  background: rgba(3,3,3,0.5);
  width: 50px;
  height: 50px;
  position: absolute;
}

#button:hover .mask {
  top: 15px;
  left: 0px;
  background: url("assets/images/mask.png") rgba(3,3,3,0.5) no-repeat center;
}

#button:hover .history {
  top: 70px;
  left: 5px;
  background: url("assets/images/history.png") rgba(3,3,3,0.5) no-repeat center;
}

#button:hover .message {
  top: 120px;
  left: 20px;
  background: url("assets/images/message.png") rgba(3,3,3,0.5) no-repeat center;
}

#button:hover .setting {
  top: 130px;
  left: 75px;
  background: url("assets/images/setting.png") rgba(3,3,3,0.5) no-repeat center;
}

#button:hover .sign {
  top: 80px;
  left: 120px;
  background: url("assets/images/signin.png") rgba(3,3,3,0.5) no-repeat center;
  /*background-size: 50px;*/
}