zoukankan      html  css  js  c++  java
  • 纯CSS3打造圆形菜单

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

    使用伪类选择器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;*/
    }
  • 相关阅读:
    Hadoop 的版本问题
    SSH 端口转发原理
    KM算法
    最大流算法小结
    pku 2195 KM算法求最小权二分匹配
    SAP(最短增广路算法) 最大流模板
    最大流模板
    pku 1459 最大流 SAP
    pku Drainage Ditches 简单最大流 直接套模板 注意可能有重边
    推荐:吴军 谷歌黑板报 《浪潮之颠》
  • 原文地址:https://www.cnblogs.com/AminHuang/p/4358068.html
Copyright © 2011-2022 走看看